= ({showBanner=true,pageTitle,tagList,showB
{showBtn && }
+ {customBtn}
{description}
diff --git a/frontend/packages/common/src/components/aoplatform/PublishApprovalModalContent.tsx b/frontend/packages/common/src/components/aoplatform/PublishApprovalModalContent.tsx
index 66ef75ae..45455e89 100644
--- a/frontend/packages/common/src/components/aoplatform/PublishApprovalModalContent.tsx
+++ b/frontend/packages/common/src/components/aoplatform/PublishApprovalModalContent.tsx
@@ -2,7 +2,7 @@ import {App, Col, Form, Input, Row, Table, Tooltip} from "antd";
import {forwardRef, useEffect, useImperativeHandle, useMemo} from "react";
import {PublishApprovalInfoType, PublishApprovalModalHandle, PublishApprovalModalProps, PublishVersionTableListItem} from "@common/const/approval/type.tsx";
import {useFetch} from "@common/hooks/http.ts";
-import {BasicResponse, FORM_ERROR_TIPS, PLACEHOLDER, RESPONSE_TIPS, STATUS_CODE, STATUS_COLOR, VALIDATE_MESSAGE} from "@common/const/const.tsx";
+import {BasicResponse, FORM_ERROR_TIPS, PLACEHOLDER, RESPONSE_TIPS, STATUS_CODE, STATUS_COLOR} from "@common/const/const.tsx";
import WithPermission from "@common/components/aoplatform/WithPermission.tsx";
import { SYSTEM_PUBLISH_ONLINE_COLUMNS } from "@core/const/system/const.tsx";
import { $t } from "@common/locales";
@@ -14,7 +14,7 @@ import { SystemInsidePublishOnlineItems } from "@core/pages/system/publish/Syste
export const PublishApprovalModalContent = forwardRef((props, ref) => {
const { message } = App.useApp()
- const { type,data,insideSystem = false,serviceId, teamId} = props
+ const { type,data,insidePage = false, serviceType = 'rest', serviceId, teamId} = props
const [form] = Form.useForm();
const {fetchData} = useFetch()
const {state} = useGlobalContext()
@@ -109,7 +109,7 @@ export const PublishApprovalModalContent = forwardRefApprovalRouteColumns.map((x)=>({
+ const translatedRouteColumns = useMemo(()=>ApprovalRouteColumns.filter(x=> serviceType === 'rest' ? x.dataIndex !== 'name' : x.dataIndex !== 'methods').map((x)=>({
...x,
...(x.dataIndex === 'change' ? {
render:(_,entity)=>(
@@ -122,7 +122,7 @@ export const PublishApprovalModalContent = forwardRefSYSTEM_PUBLISH_ONLINE_COLUMNS.map((x)=>{
if(x.dataIndex === 'status'){
@@ -142,7 +142,7 @@ export const PublishApprovalModalContent = forwardRef
- {!insideSystem && <>
+ {!insidePage && <>
{$t('申请系统')}：
{(data as PublishApprovalInfoType).project || '-'}
@@ -177,7 +177,7 @@ export const PublishApprovalModalContent = forwardRef
{
- insideSystem &&
+ insidePage &&
<>
- {$t('上游列表')}：
-
-
+ {
+ serviceType === 'rest' && <>
+ {$t('上游列表')}：
+
+
+
+ }
{
{$t('替换文件')}
{$t('是否放行')}
{$t('监控')}
+ {$t('必填')}
+ {$t('字符非法，仅支持英文')}
)
}
\ No newline at end of file
diff --git a/frontend/packages/common/src/components/aoplatform/prompt-editor/PromptEditor.tsx b/frontend/packages/common/src/components/aoplatform/prompt-editor/PromptEditor.tsx
new file mode 100644
index 00000000..20320bb3
--- /dev/null
+++ b/frontend/packages/common/src/components/aoplatform/prompt-editor/PromptEditor.tsx
@@ -0,0 +1,221 @@
+'use client'
+
+import type { FC } from 'react'
+import { useEffect, useMemo } from 'react'
+import type {
+ EditorState,
+} from 'lexical'
+import {
+ $getRoot,
+ TextNode,
+} from 'lexical'
+import { CodeNode } from '@lexical/code'
+import { LexicalComposer } from '@lexical/react/LexicalComposer'
+import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin'
+import { ContentEditable } from '@lexical/react/LexicalContentEditable'
+import LexicalErrorBoundary from '@lexical/react/LexicalErrorBoundary'
+import { OnChangePlugin } from '@lexical/react/LexicalOnChangePlugin'
+import { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin'
+// import TreeView from './plugins/tree-view'
+import Placeholder from './plugins/placeholder'
+import ComponentPickerBlock from './plugins/component-picker-block/index'
+import {
+ ContextBlock,
+ ContextBlockNode,
+ ContextBlockReplacementBlock,
+} from './plugins/context-block/index'
+import {
+ QueryBlock,
+ QueryBlockNode,
+ QueryBlockReplacementBlock,
+} from './plugins/query-block/index'
+import {
+ HistoryBlock,
+ HistoryBlockNode,
+ HistoryBlockReplacementBlock,
+} from './plugins/history-block/index'
+import {
+ WorkflowVariableBlock,
+ WorkflowVariableBlockNode,
+ WorkflowVariableBlockReplacementBlock,
+} from './plugins/workflow-variable-block/index'
+import VariableBlock from './plugins/variable-block/index'
+import VariableValueBlock from './plugins/variable-value-block/index'
+import { VariableValueBlockNode } from './plugins/variable-value-block/node'
+import { CustomTextNode } from './plugins/custom-text/node'
+import OnBlurBlock from './plugins/on-blur-or-focus-block'
+import UpdateBlock from './plugins/update-block'
+import { textToEditorState } from './utils'
+import type {
+ ContextBlockType,
+ ExternalToolBlockType,
+ HistoryBlockType,
+ QueryBlockType,
+ VariableBlockType,
+ WorkflowVariableBlockType,
+} from './types'
+import {
+ UPDATE_DATASETS_EVENT_EMITTER,
+ UPDATE_HISTORY_EVENT_EMITTER,
+} from './constants'
+import { useEventEmitterContextContext } from '@common/contexts/event-emitter'
+
+export type PromptEditorProps = {
+ instanceId?: string
+ compact?: boolean
+ className?: string
+ placeholder?: string
+ placeholderClassName?: string
+ style?: React.CSSProperties
+ value?: string
+ editable?: boolean
+ onChange?: (text: string) => void
+ onBlur?: () => void
+ onFocus?: () => void
+ contextBlock?: ContextBlockType
+ queryBlock?: QueryBlockType
+ historyBlock?: HistoryBlockType
+ variableBlock?: VariableBlockType
+ externalToolBlock?: ExternalToolBlockType
+ workflowVariableBlock?: WorkflowVariableBlockType
+}
+
+const PromptEditor: FC = ({
+ instanceId,
+ compact,
+ className,
+ placeholder,
+ placeholderClassName,
+ style,
+ value,
+ editable = true,
+ onChange,
+ onBlur,
+ onFocus,
+ contextBlock,
+ queryBlock,
+ historyBlock,
+ variableBlock,
+ externalToolBlock,
+ workflowVariableBlock,
+}) => {
+ const { eventEmitter } = useEventEmitterContextContext()
+ const initialConfig = {
+ namespace: 'prompt-editor',
+ nodes: [
+ CodeNode,
+ CustomTextNode,
+ {
+ replace: TextNode,
+ with: (node: TextNode) => new CustomTextNode(node.__text),
+ },
+ ContextBlockNode,
+ HistoryBlockNode,
+ QueryBlockNode,
+ WorkflowVariableBlockNode,
+ VariableValueBlockNode,
+ ],
+ editorState: textToEditorState(value || ''),
+ onError: (error: Error) => {
+ throw error
+ },
+ }
+
+ const handleEditorChange = (editorState: EditorState) => {
+ const text = editorState.read(() => {
+ return $getRoot().getChildren().map(p => p.getTextContent()).join('\n')
+ })
+ if (onChange)
+ onChange(text)
+ }
+
+ useEffect(() => {
+ eventEmitter?.emit({
+ type: UPDATE_DATASETS_EVENT_EMITTER,
+ payload: contextBlock?.datasets,
+ } as any)
+ }, [eventEmitter, contextBlock?.datasets])
+ useEffect(() => {
+ eventEmitter?.emit({
+ type: UPDATE_HISTORY_EVENT_EMITTER,
+ payload: historyBlock?.history,
+ } as any)
+ }, [eventEmitter, historyBlock?.history])
+
+ return (
+
+
+
}
+ placeholder={
}
+ ErrorBoundary={LexicalErrorBoundary}
+ />
+
+
+ {
+ contextBlock?.show && (
+ <>
+
+
+
+ )
+ }
+ {
+ queryBlock?.show && (
+ <>
+
+
+
+ )
+ }
+ {
+ historyBlock?.show && (
+ <>
+
+
+
+ )
+ }
+ {
+ (variableBlock?.show || externalToolBlock?.show) && (
+ <>
+
+
+
+ )
+ }
+ {
+ workflowVariableBlock?.show && (
+ <>
+
+
+
+ )
+ }
+
+
+
+
+ {/*
*/}
+
{value?.length || 0}
+
+ )}
+ ><>
+ {value !== undefined && ({
+ // id: item.id,
+ // name: item.name,
+ // type: item.data_source_type,
+ // })),
+ // onAddContext: ()=>{console.log('?onAddContext')},
+ }}
+ variableBlock={{
+ show: true,
+ variables:promptVariables?.map(x=>({name:x.key, value:x.key})) || [],
+ }}
+ externalToolBlock={{
+ show: false,
+ externalTools: [],
+ // onAddExternalTool: handleOpenExternalDataToolModal,
+ }}
+ historyBlock={{
+ show: false,
+ selectable: false,
+ history: {
+ user: '',
+ assistant: '',
+ },
+ onEditRole: () => { },
+ }}
+ queryBlock={{
+ show: false,
+ selectable: true,
+ }}
+ onChange={(value) => {
+ handleChange?.(value, [])
+ }}
+ onBlur={() => {
+ const keys = getVars(value)
+ handleChange(value, keys)
+ if(keys.filter(key => !previousKeys.includes(key)).length > 0){
+ variablesChange?.(keys)
+ setPreviousKeys(keys)
+ }
+ }}
+ editable={true}
+ />
+ }
+ )
+}
+
+export default PromptEditorResizable
\ No newline at end of file
diff --git a/frontend/packages/common/src/components/aoplatform/prompt-editor/constants.tsx b/frontend/packages/common/src/components/aoplatform/prompt-editor/constants.tsx
new file mode 100644
index 00000000..f7fd5204
--- /dev/null
+++ b/frontend/packages/common/src/components/aoplatform/prompt-editor/constants.tsx
@@ -0,0 +1,52 @@
+// import type { ValueSelector } from '../../workflow/types'
+
+export const CONTEXT_PLACEHOLDER_TEXT = '{{#context#}}'
+export const HISTORY_PLACEHOLDER_TEXT = '{{#histories#}}'
+export const QUERY_PLACEHOLDER_TEXT = '{{#query#}}'
+export const PRE_PROMPT_PLACEHOLDER_TEXT = '{{#pre_prompt#}}'
+export const UPDATE_DATASETS_EVENT_EMITTER = 'prompt-editor-context-block-update-datasets'
+export const UPDATE_HISTORY_EVENT_EMITTER = 'prompt-editor-history-block-update-role'
+export const MAX_VAR_KEY_LENGTH = 30
+
+export const checkHasContextBlock = (text: string) => {
+ if (!text)
+ return false
+ return text.includes(CONTEXT_PLACEHOLDER_TEXT)
+}
+
+export const checkHasHistoryBlock = (text: string) => {
+ if (!text)
+ return false
+ return text.includes(HISTORY_PLACEHOLDER_TEXT)
+}
+
+export const checkHasQueryBlock = (text: string) => {
+ if (!text)
+ return false
+ return text.includes(QUERY_PLACEHOLDER_TEXT)
+}
+
+/*
+* {{#1711617514996.name#}} => [1711617514996, name]
+* {{#1711617514996.sys.query#}} => [sys, query]
+*/
+export const getInputVars = (text: string) => {
+ if (!text)
+ return []
+
+ const allVars = text.match(/{{#([^#]*)#}}/g)
+ if (allVars && allVars?.length > 0) {
+ // {{#context#}}, {{#query#}} is not input vars
+ const inputVars = allVars
+ .filter(item => item.includes('.'))
+ .map((item) => {
+ const valueSelector = item.replace('{{#', '').replace('#}}', '').split('.')
+ if (valueSelector[1] === 'sys' && /^\d+$/.test(valueSelector[0]))
+ return valueSelector.slice(1)
+
+ return valueSelector
+ })
+ return inputVars
+ }
+ return []
+}
diff --git a/frontend/packages/common/src/components/aoplatform/prompt-editor/hooks.ts b/frontend/packages/common/src/components/aoplatform/prompt-editor/hooks.ts
new file mode 100644
index 00000000..c9e4cc12
--- /dev/null
+++ b/frontend/packages/common/src/components/aoplatform/prompt-editor/hooks.ts
@@ -0,0 +1,185 @@
+import {
+ useCallback,
+ useEffect,
+ useRef,
+ useState,
+} from 'react'
+import type { Dispatch, RefObject, SetStateAction } from 'react'
+import type {
+ Klass,
+ LexicalCommand,
+ LexicalEditor,
+ TextNode,
+} from 'lexical'
+import {
+ $getNodeByKey,
+ $getSelection,
+ $isDecoratorNode,
+ $isNodeSelection,
+ COMMAND_PRIORITY_LOW,
+ KEY_BACKSPACE_COMMAND,
+ KEY_DELETE_COMMAND,
+} from 'lexical'
+import type { EntityMatch } from '@lexical/text'
+import {
+ mergeRegister,
+} from '@lexical/utils'
+import { useLexicalNodeSelection } from '@lexical/react/useLexicalNodeSelection'
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
+import { $isContextBlockNode } from './plugins/context-block/node'
+import { DELETE_CONTEXT_BLOCK_COMMAND } from './plugins/context-block'
+import { $isHistoryBlockNode } from './plugins/history-block/node'
+import { DELETE_HISTORY_BLOCK_COMMAND } from './plugins/history-block'
+import { $isQueryBlockNode } from './plugins/query-block/node'
+import { DELETE_QUERY_BLOCK_COMMAND } from './plugins/query-block'
+import type { CustomTextNode } from './plugins/custom-text/node'
+import { registerLexicalTextEntity } from './utils'
+
+export type UseSelectOrDeleteHandler = (nodeKey: string, command?: LexicalCommand) => [RefObject, boolean]
+export const useSelectOrDelete: UseSelectOrDeleteHandler = (nodeKey: string, command?: LexicalCommand) => {
+ const ref = useRef(null)
+ const [editor] = useLexicalComposerContext()
+ const [isSelected, setSelected, clearSelection] = useLexicalNodeSelection(nodeKey)
+
+ const handleDelete = useCallback(
+ (event: KeyboardEvent) => {
+ const selection = $getSelection()
+ const nodes = selection?.getNodes()
+ if (
+ !isSelected
+ && nodes?.length === 1
+ && (
+ ($isContextBlockNode(nodes[0]) && command === DELETE_CONTEXT_BLOCK_COMMAND)
+ || ($isHistoryBlockNode(nodes[0]) && command === DELETE_HISTORY_BLOCK_COMMAND)
+ || ($isQueryBlockNode(nodes[0]) && command === DELETE_QUERY_BLOCK_COMMAND)
+ )
+ )
+ editor.dispatchCommand(command, undefined)
+
+ if (isSelected && $isNodeSelection(selection)) {
+ event.preventDefault()
+ const node = $getNodeByKey(nodeKey)
+ if ($isDecoratorNode(node)) {
+ if (command)
+ editor.dispatchCommand(command, undefined)
+
+ node.remove()
+ return true
+ }
+ }
+
+ return false
+ },
+ [isSelected, nodeKey, command, editor],
+ )
+
+ const handleSelect = useCallback((e: MouseEvent) => {
+ e.stopPropagation()
+ clearSelection()
+ setSelected(true)
+ }, [setSelected, clearSelection])
+
+ useEffect(() => {
+ const ele = ref.current
+
+ if (ele)
+ ele.addEventListener('click', handleSelect)
+
+ return () => {
+ if (ele)
+ ele.removeEventListener('click', handleSelect)
+ }
+ }, [handleSelect])
+ useEffect(() => {
+ return mergeRegister(
+ editor.registerCommand(
+ KEY_DELETE_COMMAND,
+ handleDelete,
+ COMMAND_PRIORITY_LOW,
+ ),
+ editor.registerCommand(
+ KEY_BACKSPACE_COMMAND,
+ handleDelete,
+ COMMAND_PRIORITY_LOW,
+ ),
+ )
+ }, [editor, clearSelection, handleDelete])
+
+ return [ref, isSelected]
+}
+
+export type UseTriggerHandler = () => [RefObject, boolean, Dispatch>]
+export const useTrigger: UseTriggerHandler = () => {
+ const triggerRef = useRef(null)
+ const [open, setOpen] = useState(false)
+ const handleOpen = useCallback((e: MouseEvent) => {
+ e.stopPropagation()
+ setOpen(v => !v)
+ }, [])
+
+ useEffect(() => {
+ const trigger = triggerRef.current
+ if (trigger)
+ trigger.addEventListener('click', handleOpen)
+
+ return () => {
+ if (trigger)
+ trigger.removeEventListener('click', handleOpen)
+ }
+ }, [handleOpen])
+
+ return [triggerRef, open, setOpen]
+}
+
+export function useLexicalTextEntity(
+ getMatch: (text: string) => null | EntityMatch,
+ targetNode: Klass,
+ createNode: (textNode: CustomTextNode) => T,
+) {
+ const [editor] = useLexicalComposerContext()
+
+ useEffect(() => {
+ return mergeRegister(...registerLexicalTextEntity(editor, getMatch, targetNode, createNode))
+ }, [createNode, editor, getMatch, targetNode])
+}
+
+export type MenuTextMatch = {
+ leadOffset: number
+ matchingString: string
+ replaceableString: string
+}
+export type TriggerFn = (
+ text: string,
+ editor: LexicalEditor,
+) => MenuTextMatch | null
+export const PUNCTUATION = '\\.,\\+\\*\\?\\$\\@\\|#{}\\(\\)\\^\\-\\[\\]\\\\/!%\'"~=<>_:;'
+export function useBasicTypeaheadTriggerMatch(
+ trigger: string,
+ { minLength = 1, maxLength = 75 }: { minLength?: number; maxLength?: number },
+): TriggerFn {
+ return useCallback(
+ (text: string) => {
+ const validChars = `[${PUNCTUATION}\\s]`
+ const TypeaheadTriggerRegex = new RegExp(
+ '(.*)('
+ + `[${trigger}]`
+ + `((?:${validChars}){0,${maxLength}})`
+ + ')$',
+ )
+ const match = TypeaheadTriggerRegex.exec(text)
+ if (match !== null) {
+ const maybeLeadingWhitespace = match[1]
+ const matchingString = match[3]
+ if (matchingString.length >= minLength) {
+ return {
+ leadOffset: match.index + maybeLeadingWhitespace.length,
+ matchingString,
+ replaceableString: match[2],
+ }
+ }
+ }
+ return null
+ },
+ [maxLength, minLength, trigger],
+ )
+}
diff --git a/frontend/packages/common/src/components/aoplatform/prompt-editor/plugins/component-picker-block/hooks.tsx b/frontend/packages/common/src/components/aoplatform/prompt-editor/plugins/component-picker-block/hooks.tsx
new file mode 100644
index 00000000..e09a83ed
--- /dev/null
+++ b/frontend/packages/common/src/components/aoplatform/prompt-editor/plugins/component-picker-block/hooks.tsx
@@ -0,0 +1,294 @@
+import { useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
+import { $insertNodes } from 'lexical'
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
+import type {
+ ContextBlockType,
+ ExternalToolBlockType,
+ HistoryBlockType,
+ QueryBlockType,
+ VariableBlockType,
+ WorkflowVariableBlockType,
+} from '../../types'
+import { INSERT_CONTEXT_BLOCK_COMMAND } from '../context-block'
+import { INSERT_HISTORY_BLOCK_COMMAND } from '../history-block'
+import { INSERT_QUERY_BLOCK_COMMAND } from '../query-block'
+import { INSERT_VARIABLE_VALUE_BLOCK_COMMAND } from '../variable-block'
+import { $createCustomTextNode } from '../custom-text/node'
+import { PromptMenuItem } from './prompt-option'
+import { VariableMenuItem } from './variable-option'
+import { PickerBlockMenuOption } from './menu'
+import { $t } from '@common/locales'
+// import { File05 } from '@/app/components/base/icons/src/vender/solid/files'
+// import {
+// MessageClockCircle,
+// Tool03,
+// } from '@/app/components/base/icons/src/vender/solid/general'
+// import { BracketsX } from '@/app/components/base/icons/src/vender/line/development'
+// import { UserEdit02 } from '@/app/components/base/icons/src/vender/solid/users'
+// import { ArrowUpRight } from '@/app/components/base/icons/src/vender/line/arrows'
+// import AppIcon from '@/app/components/base/app-icon'
+
+export const usePromptOptions = (
+ contextBlock?: ContextBlockType,
+ queryBlock?: QueryBlockType,
+ historyBlock?: HistoryBlockType,
+) => {
+ const [editor] = useLexicalComposerContext()
+
+ const promptOptions: PickerBlockMenuOption[] = []
+ if (contextBlock?.show) {
+ promptOptions.push(new PickerBlockMenuOption({
+ key: $t('上下文'),
+ group: 'prompt context',
+ render: ({ isSelected, onSelect, onSetHighlight }) => {
+ return }
+ // icon={}
+ disabled={!contextBlock.selectable}
+ isSelected={isSelected}
+ onClick={onSelect}
+ onMouseEnter={onSetHighlight}
+ />
+ },
+ onSelect: () => {
+ if (!contextBlock?.selectable)
+ return
+ editor.dispatchCommand(INSERT_CONTEXT_BLOCK_COMMAND, undefined)
+ },
+ }))
+ }
+
+ if (queryBlock?.show) {
+ promptOptions.push(
+ new PickerBlockMenuOption({
+ key: $t('查询内容'),
+ group: 'prompt query',
+ render: ({ isSelected, onSelect, onSetHighlight }) => {
+ return (
+ }
+ // icon={}
+ disabled={!queryBlock.selectable}
+ isSelected={isSelected}
+ onClick={onSelect}
+ onMouseEnter={onSetHighlight}
+ />
+ )
+ },
+ onSelect: () => {
+ if (!queryBlock?.selectable)
+ return
+ editor.dispatchCommand(INSERT_QUERY_BLOCK_COMMAND, undefined)
+ },
+ }),
+ )
+ }
+
+ if (historyBlock?.show) {
+ promptOptions.push(
+ new PickerBlockMenuOption({
+ key: $t('会话历史'),
+ group: 'prompt history',
+ render: ({ isSelected, onSelect, onSetHighlight }) => {
+ return (
+ }
+ // icon={}
+ disabled={!historyBlock.selectable
+ }
+ isSelected={isSelected}
+ onClick={onSelect}
+ onMouseEnter={onSetHighlight}
+ />
+ )
+ },
+ onSelect: () => {
+ if (!historyBlock?.selectable)
+ return
+ editor.dispatchCommand(INSERT_HISTORY_BLOCK_COMMAND, undefined)
+ },
+ }),
+ )
+ }
+ return promptOptions
+}
+
+export const useVariableOptions = (
+ variableBlock?: VariableBlockType,
+ queryString?: string,
+): PickerBlockMenuOption[] => {
+ const { t } = useTranslation()
+ const [editor] = useLexicalComposerContext()
+
+ const options = useMemo(() => {
+ if (!variableBlock?.variables)
+ return []
+
+ const baseOptions = (variableBlock.variables).map((item) => {
+ return new PickerBlockMenuOption({
+ key: item.value,
+ group: 'prompt variable',
+ render: ({ queryString, isSelected, onSelect, onSetHighlight }) => {
+ return (
+ }
+ // icon={}
+ queryString={queryString}
+ isSelected={isSelected}
+ onClick={onSelect}
+ onMouseEnter={onSetHighlight}
+ />
+ )
+ },
+ onSelect: () => {
+ editor.dispatchCommand(INSERT_VARIABLE_VALUE_BLOCK_COMMAND, `{{${item.value}}}`)
+ },
+ })
+ })
+ if (!queryString)
+ return baseOptions
+
+ const regex = new RegExp(queryString, 'i')
+
+ return baseOptions.filter(option => regex.test(option.key))
+ }, [editor, queryString, variableBlock])
+
+ const addOption = useMemo(() => {
+ return new PickerBlockMenuOption({
+ key: $t('添加新变量'),
+ group: 'prompt variable',
+ render: ({ queryString, isSelected, onSelect, onSetHighlight }) => {
+ return (
+ }
+ // icon={}
+ queryString={queryString}
+ isSelected={isSelected}
+ onClick={onSelect}
+ onMouseEnter={onSetHighlight}
+ />
+ )
+ },
+ onSelect: () => {
+ editor.update(() => {
+ const prefixNode = $createCustomTextNode('{{')
+ const suffixNode = $createCustomTextNode('}}')
+ $insertNodes([prefixNode, suffixNode])
+ prefixNode.select()
+ })
+ },
+ })
+ }, [editor, t])
+
+ return useMemo(() => {
+ return variableBlock?.show ? [...options, addOption] : []
+ }, [options, addOption, variableBlock?.show])
+}
+
+export const useExternalToolOptions = (
+ externalToolBlockType?: ExternalToolBlockType,
+ queryString?: string,
+) => {
+ const { t } = useTranslation()
+ const [editor] = useLexicalComposerContext()
+
+ const options = useMemo(() => {
+ if (!externalToolBlockType?.externalTools)
+ return []
+ const baseToolOptions = (externalToolBlockType.externalTools).map((item) => {
+ return new PickerBlockMenuOption({
+ key: item.name,
+ group: 'external tool',
+ render: ({ queryString, isSelected, onSelect, onSetHighlight }) => {
+ return (
+ }
+ // icon={
+ //
+ // }
+ extraElement={{item.variableName}
}
+ queryString={queryString}
+ isSelected={isSelected}
+ onClick={onSelect}
+ onMouseEnter={onSetHighlight}
+ />
+ )
+ },
+ onSelect: () => {
+ editor.dispatchCommand(INSERT_VARIABLE_VALUE_BLOCK_COMMAND, `{{${item.variableName}}}`)
+ },
+ })
+ })
+ if (!queryString)
+ return baseToolOptions
+
+ const regex = new RegExp(queryString, 'i')
+
+ return baseToolOptions.filter(option => regex.test(option.key))
+ }, [editor, queryString, externalToolBlockType])
+
+ const addOption = useMemo(() => {
+ return new PickerBlockMenuOption({
+ key: $t('添加工具'),
+ group: 'external tool',
+ render: ({ queryString, isSelected, onSelect, onSetHighlight }) => {
+ return (
+ }
+ // extraElement={< ArrowUpRight className='w-3 h-3 text-gray-400' />}
+ queryString={queryString}
+ isSelected={isSelected}
+ onClick={onSelect}
+ onMouseEnter={onSetHighlight}
+ />
+ )
+ },
+ onSelect: () => {
+ externalToolBlockType?.onAddExternalTool?.()
+ },
+ })
+ }, [externalToolBlockType, t])
+
+ return useMemo(() => {
+ return externalToolBlockType?.show ? [...options, addOption] : []
+ }, [options, addOption, externalToolBlockType?.show])
+}
+
+export const useOptions = (
+ contextBlock?: ContextBlockType,
+ queryBlock?: QueryBlockType,
+ historyBlock?: HistoryBlockType,
+ variableBlock?: VariableBlockType,
+ externalToolBlockType?: ExternalToolBlockType,
+ workflowVariableBlockType?: WorkflowVariableBlockType,
+ queryString?: string,
+) => {
+ const promptOptions = usePromptOptions(contextBlock, queryBlock, historyBlock)
+ const variableOptions = useVariableOptions(variableBlock, queryString)
+ const externalToolOptions = useExternalToolOptions(externalToolBlockType, queryString)
+ const workflowVariableOptions = useMemo(() => {
+ if (!workflowVariableBlockType?.show)
+ return []
+
+ return workflowVariableBlockType.variables || []
+ }, [workflowVariableBlockType])
+
+ return useMemo(() => {
+ return {
+ workflowVariableOptions,
+ allFlattenOptions: [...promptOptions, ...variableOptions, ...externalToolOptions],
+ }
+ }, [promptOptions, variableOptions, externalToolOptions, workflowVariableOptions])
+}
diff --git a/frontend/packages/common/src/components/aoplatform/prompt-editor/plugins/component-picker-block/index.tsx b/frontend/packages/common/src/components/aoplatform/prompt-editor/plugins/component-picker-block/index.tsx
new file mode 100644
index 00000000..bfece5ba
--- /dev/null
+++ b/frontend/packages/common/src/components/aoplatform/prompt-editor/plugins/component-picker-block/index.tsx
@@ -0,0 +1,212 @@
+import {
+ Fragment,
+ memo,
+ useCallback,
+ useState,
+} from 'react'
+import ReactDOM from 'react-dom'
+import {
+ flip,
+ offset,
+ shift,
+ useFloating,
+} from '@floating-ui/react'
+import type { TextNode } from 'lexical'
+import type { MenuRenderFn } from '@lexical/react/LexicalTypeaheadMenuPlugin'
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
+import { LexicalTypeaheadMenuPlugin } from '@lexical/react/LexicalTypeaheadMenuPlugin'
+import type {
+ ContextBlockType,
+ ExternalToolBlockType,
+ HistoryBlockType,
+ QueryBlockType,
+ VariableBlockType,
+ WorkflowVariableBlockType,
+} from '../../types'
+import { useBasicTypeaheadTriggerMatch } from '../../hooks'
+import { INSERT_WORKFLOW_VARIABLE_BLOCK_COMMAND } from '../workflow-variable-block'
+import { INSERT_VARIABLE_VALUE_BLOCK_COMMAND } from '../variable-block'
+import { $splitNodeContainingQuery } from '../../utils'
+import { useOptions } from './hooks'
+import type { PickerBlockMenuOption } from './menu'
+// import VarReferenceVars from '@/app/components/workflow/nodes/_base/components/variable/var-reference-vars'
+import { useEventEmitterContextContext } from '@common/contexts/event-emitter'
+
+type ComponentPickerProps = {
+ triggerString: string
+ contextBlock?: ContextBlockType
+ queryBlock?: QueryBlockType
+ historyBlock?: HistoryBlockType
+ variableBlock?: VariableBlockType
+ externalToolBlock?: ExternalToolBlockType
+ workflowVariableBlock?: WorkflowVariableBlockType
+}
+const ComponentPicker = ({
+ triggerString,
+ contextBlock,
+ queryBlock,
+ historyBlock,
+ variableBlock,
+ externalToolBlock,
+ workflowVariableBlock,
+}: ComponentPickerProps) => {
+ const { eventEmitter } = useEventEmitterContextContext()
+ const { refs, floatingStyles, isPositioned } = useFloating({
+ placement: 'bottom-start',
+ middleware: [
+ offset(0), // fix hide cursor
+ shift({
+ padding: 8,
+ }),
+ flip(),
+ ],
+ })
+ const [editor] = useLexicalComposerContext()
+ const checkForTriggerMatch = useBasicTypeaheadTriggerMatch(triggerString, {
+ minLength: 0,
+ maxLength: 0,
+ })
+
+ const [queryString, setQueryString] = useState(null)
+
+ eventEmitter?.useSubscription((v: any) => {
+ if (v.type === INSERT_VARIABLE_VALUE_BLOCK_COMMAND)
+ editor.dispatchCommand(INSERT_VARIABLE_VALUE_BLOCK_COMMAND, `{{${v.payload}}}`)
+ })
+
+ const {
+ allFlattenOptions,
+ workflowVariableOptions,
+ } = useOptions(
+ contextBlock,
+ queryBlock,
+ historyBlock,
+ variableBlock,
+ externalToolBlock,
+ workflowVariableBlock,
+ )
+
+ const onSelectOption = useCallback(
+ (
+ selectedOption: PickerBlockMenuOption,
+ nodeToRemove: TextNode | null,
+ closeMenu: () => void,
+ ) => {
+ editor.update(() => {
+ if (nodeToRemove && selectedOption?.key)
+ nodeToRemove.remove()
+
+ selectedOption.onSelectMenuOption()
+ closeMenu()
+ })
+ },
+ [editor],
+ )
+
+ const handleSelectWorkflowVariable = useCallback((variables: string[]) => {
+ editor.update(() => {
+ const needRemove = $splitNodeContainingQuery(checkForTriggerMatch(triggerString, editor)!)
+ if (needRemove)
+ needRemove.remove()
+ })
+
+ if (variables[1] === 'sys.query' || variables[1] === 'sys.files')
+ editor.dispatchCommand(INSERT_WORKFLOW_VARIABLE_BLOCK_COMMAND, [variables[1]])
+ else
+ editor.dispatchCommand(INSERT_WORKFLOW_VARIABLE_BLOCK_COMMAND, variables)
+ }, [editor, checkForTriggerMatch, triggerString])
+
+ const renderMenu = useCallback>((
+ anchorElementRef,
+ { options, selectedIndex, selectOptionAndCleanUp, setHighlightedIndex },
+ ) => {
+ if (!(anchorElementRef.current && (allFlattenOptions.length || workflowVariableBlock?.show)))
+ return null
+ refs.setReference(anchorElementRef.current)
+
+ return (
+ <>
+ {
+ ReactDOM.createPortal(
+ // The `LexicalMenu` will try to calculate the position of the floating menu based on the first child.
+ // Since we use floating ui, we need to wrap it with a div to prevent the position calculation being affected.
+ // See https://github.com/facebook/lexical/blob/ac97dfa9e14a73ea2d6934ff566282d7f758e8bb/packages/lexical-react/src/shared/LexicalMenu.ts#L493
+
+
+ {
+ options.map((option, index) => (
+
+ {
+ // Divider
+ index !== 0 && options.at(index - 1)?.group !== option.group && (
+
+ )
+ }
+ {option.renderMenuOption({
+ queryString,
+ isSelected: selectedIndex === index,
+ onSelect: () => {
+ selectOptionAndCleanUp(option)
+ },
+ onSetHighlight: () => {
+ setHighlightedIndex(index)
+ },
+ })}
+
+ ))
+ }
+ {
+ workflowVariableBlock?.show && (
+ <>
+ {
+ (!!options.length) && (
+
+ )
+ }
+
+ {/* {
+ handleSelectWorkflowVariable(variables)
+ }}
+ /> */}
+
+
+ )
+ }
+
+
{
+ if (disabled)
+ return
+ onMouseEnter()
+ }}
+ onClick={() => {
+ if (disabled)
+ return
+ onClick()
+ }}>
+ {icon}
+
{title}
+
+
+ {icon}
+
+
+ {before}
+ {middle}
+ {after}
+
+ {extraElement}
+
+ {/*
*/}
+
{$t('上下文')}
+
+
+ {/*
*/}
+
{$t('会话历史')}
+
+ {value || $t('AI 模型调用默认仅使用 Query 变量，可输入 “{” 增加新变量。')}
+
+ )
+}
+
+export default memo(Placeholder)
diff --git a/frontend/packages/common/src/components/aoplatform/prompt-editor/plugins/query-block/component.tsx b/frontend/packages/common/src/components/aoplatform/prompt-editor/plugins/query-block/component.tsx
new file mode 100644
index 00000000..115e51f1
--- /dev/null
+++ b/frontend/packages/common/src/components/aoplatform/prompt-editor/plugins/query-block/component.tsx
@@ -0,0 +1,33 @@
+import type { FC } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useSelectOrDelete } from '../../hooks'
+import { DELETE_QUERY_BLOCK_COMMAND } from './index'
+import { $t } from '@common/locales'
+// import { UserEdit02 } from '@/app/components/base/icons/src/vender/solid/users'
+
+type QueryBlockComponentProps = {
+ nodeKey: string
+}
+
+const QueryBlockComponent: FC = ({
+ nodeKey,
+}) => {
+ const [ref, isSelected] = useSelectOrDelete(nodeKey, DELETE_QUERY_BLOCK_COMMAND)
+
+ return (
+
+ {/*
*/}
+
{'{{'}
+
{$t('查询内容')}
+
{'}}'}
+
+ {/* {!isEnv && !isChatVar && (
+
+ {
+ node?.type && (
+
+
+
+ )
+ }
+
{node?.title}
+
+
+ )} */}
+
+ {/* {!isEnv && !isChatVar &&
}
+ {isEnv &&
}
+ {isChatVar &&
}
+
{varName}
+ {
+ !node && !isEnv && !isChatVar && (
+
+ )
+ } */}
+
+
+
+ {children}
+
+ {/* resize handler */}
+ {footer}
+ {!hideResize && (
+
+ )}
+
-
- {entity.name}
- {entity.email !== undefined && {entity.email}}
-
-
{entity.department}
-
+ {/*
*/}
+
getAiServiceList()}
+ addNewBtnTitle={$t("添加服务")}
+ addNewBtnWrapperClass={'my-first-step'}
+ searchPlaceholder={$t("输入名称、ID、所属团队、负责人查找服务")}
+ onAddNewBtnClick={() => {
+ setOpen(true)
+ }}
+ manualReloadTable={manualReloadTable}
+ onChange={() => {
+ setTableHttpReload(false)
+ }}
+ onSearchWordChange={(e) => {
+ setTableSearchWord(e.target.value)
+ }}
+ onRowClick={(row:AiServiceTableListItem)=>navigate(`/aiservice/${row.team.id}/inside/${row.id}`)}
+ />
+ drawerFormRef.current?.save()?.then((res)=>{res && manualReloadTable();return res})} >
+
+
+
+ { apiDetail ?
+ :
+ }
+
+
+ {defaultLlm?.id || defaultLlm?.defaultLlm}
+ {defaultLlm?.scopes?.map(x=>{x?.toLocaleUpperCase()})}
+
+
+
+
+
+ }>
+ } spinning={loading} wrapperClassName=' pb-PAGE_INSIDE_B pr-PAGE_INSIDE_X'>
+
+
+ handlerSubmit()}
+ >
+
+
+
+ )
+}
+export default AiServiceInsideRouterCreate
+
+
+
\ No newline at end of file
diff --git a/frontend/packages/core/src/pages/aiService/api/AiServiceInsideRouterList.tsx b/frontend/packages/core/src/pages/aiService/api/AiServiceInsideRouterList.tsx
new file mode 100644
index 00000000..8b9624b1
--- /dev/null
+++ b/frontend/packages/core/src/pages/aiService/api/AiServiceInsideRouterList.tsx
@@ -0,0 +1,182 @@
+import PageList, { PageProColumns } from "@common/components/aoplatform/PageList.tsx"
+import {ActionType} from "@ant-design/pro-components";
+import {FC, useEffect, useMemo, useRef, useState} from "react";
+import {Link, useNavigate, useParams} from "react-router-dom";
+import {useBreadcrumb} from "@common/contexts/BreadcrumbContext.tsx";
+import {App, Divider} from "antd";
+import {BasicResponse, COLUMNS_TITLE, DELETE_TIPS, RESPONSE_TIPS, STATUS_CODE} from "@common/const/const.tsx";
+import { SimpleMemberItem} from '@common/const/type.ts'
+import {useFetch} from "@common/hooks/http.ts";
+import {RouterParams} from "@core/components/aoplatform/RenderRoutes.tsx";
+import TableBtnWithPermission from "@common/components/aoplatform/TableBtnWithPermission.tsx";
+import { useGlobalContext } from "@common/contexts/GlobalStateContext.tsx";
+import { checkAccess } from "@common/utils/permission.ts";
+import { $t } from "@common/locales/index.ts";
+import { AiServiceRouterTableListItem } from "@core/const/ai-service/type.ts";
+import { AI_SERVICE_ROUTER_TABLE_COLUMNS } from "@core/const/ai-service/const.tsx";
+
+const AiServiceInsideRouterList:FC = ()=>{
+ const [searchWord, setSearchWord] = useState('')
+ const { setBreadcrumb } = useBreadcrumb()
+ const { modal,message } = App.useApp()
+ const [tableListDataSource, setTableListDataSource] = useState([]);
+ const [tableHttpReload, setTableHttpReload] = useState(true);
+ const {fetchData} = useFetch()
+ const pageListRef = useRef(null);
+ const [memberValueEnum, setMemberValueEnum] = useState([])
+ const {accessData,state} = useGlobalContext()
+ const {serviceId, teamId} = useParams()
+ const navigator = useNavigate()
+
+ const getRoutesList = (): Promise<{ data: AiServiceRouterTableListItem[], success: boolean }>=> {
+ if(!tableHttpReload){
+ setTableHttpReload(true)
+ return Promise.resolve({
+ data: tableListDataSource,
+ success: true,
+ });
+ }
+
+ return fetchData>('service/ai-routers',{method:'GET',eoParams:{service:serviceId,team:teamId, keyword:searchWord},eoTransformKeys:['request_path','create_time','update_time','disable']}).then(response=>{
+ const {code,data,msg} = response
+ if(code === STATUS_CODE.SUCCESS){
+ setTableListDataSource(data.apis)
+ setTableHttpReload(false)
+ return {data:data.apis, success: true}
+ }else{
+ message.error(msg || $t(RESPONSE_TIPS.error))
+ return {data:[], success:false}
+ }
+ }).catch(() => {
+ return {data:[], success:false}
+ })
+ }
+
+ const deleteRoute = (entity:AiServiceRouterTableListItem)=>{
+ return new Promise((resolve, reject)=>{
+ fetchData>('service/ai-router',{method:'DELETE',eoParams:{service:serviceId,team:teamId, router:entity!.id}}).then(response=>{
+ const {code,msg} = response
+ if(code === STATUS_CODE.SUCCESS){
+ message.success(msg || $t(RESPONSE_TIPS.success))
+ resolve(true)
+ }else{
+ message.error(msg || $t(RESPONSE_TIPS.error))
+ reject(msg || $t(RESPONSE_TIPS.error))
+ }
+ }).catch((errorInfo)=> reject(errorInfo))
+ })
+ }
+
+ const openModal = async (type: 'delete',entity:AiServiceRouterTableListItem) =>{
+ let title:string = ''
+ let content:string|React.ReactNode = ''
+ switch (type){
+ case 'delete':
+ title=$t('删除')
+ content=$t(DELETE_TIPS.default)
+ break;
+ }
+
+ modal.confirm({
+ title,
+ content,
+ onOk:()=> {
+ switch (type){
+ case 'delete':
+ return deleteRoute(entity).then((res)=>{if(res === true) manualReloadTable()})
+ }
+ },
+ width:600,
+ okText:$t('确认'),
+ okButtonProps:{
+ disabled : !checkAccess( `team.service.router.${type}`, accessData )
+ },
+ cancelText:$t('取消'),
+ closable:true,
+ icon:<>,
+ })
+ }
+
+ const operation:PageProColumns[] =[
+ {
+ title: COLUMNS_TITLE.operate,
+ key: 'option',
+ btnNums:2,
+ fixed:'right',
+ valueType: 'option',
+ render: (_: React.ReactNode, entity: AiServiceRouterTableListItem) => [
+ {navigator(`/aiservice/${teamId}/inside/${serviceId}/route/${entity.id}`)}} btnTitle="编辑"/>,
+ ,
+ {openModal('delete',entity)}} btnTitle="删除"/>,
+ ],
+ }
+ ]
+
+ const manualReloadTable = () => {
+ setTableHttpReload(true); // 表格数据需要从后端接口获取
+ pageListRef.current?.reload()
+ };
+
+ const getMemberList = async ()=>{
+ setMemberValueEnum([])
+ const {code,data,msg} = await fetchData>('simple/member',{method:'GET'})
+ if(code === STATUS_CODE.SUCCESS){
+ setMemberValueEnum(data.members)
+ }else{
+ message.error(msg || $t(RESPONSE_TIPS.error))
+ }
+ }
+
+ useEffect(() => {
+ setBreadcrumb([
+ {
+ title:{$t('服务')}
+ },
+ {
+ title:$t('路由')
+ }
+ ])
+ getMemberList()
+ manualReloadTable()
+ }, [serviceId]);
+
+ const columns = useMemo(()=>{
+ return [...AI_SERVICE_ROUTER_TABLE_COLUMNS].map(x=>{
+ if(x.filters &&((x.dataIndex as string[])?.indexOf('creator') !== -1) ){
+ const tmpValueEnum:{[k:string]:{text:string}} = {}
+ memberValueEnum?.forEach((x:SimpleMemberItem)=>{
+ tmpValueEnum[x.name] = {text:x.name}
+ })
+ x.valueEnum = tmpValueEnum
+ }
+
+ return {...x,title:typeof x.title === 'string' ? $t(x.title as string) : x.title}})
+ },[memberValueEnum,state.language])
+
+
+ return (
+ <>
+ getRoutesList()}
+ dataSource={tableListDataSource}
+ addNewBtnTitle={$t('添加路由')}
+ searchPlaceholder={$t('输入 URL 查找路由')}
+ onAddNewBtnClick={()=>{navigator(`/aiservice/${teamId}/inside/${serviceId}/route/create`)}}
+ addNewBtnAccess="team.service.router.add"
+ tableClickAccess="team.service.router.view"
+ manualReloadTable={manualReloadTable}
+ onSearchWordChange={(e)=>{setSearchWord(e.target.value)}}
+ onChange={() => {
+ setTableHttpReload(false)
+ }}
+ onRowClick={(row:AiServiceRouterTableListItem)=>navigator(`/aiservice/${teamId}/inside/${serviceId}/route/${row.id}`)}
+ tableClass="mr-PAGE_INSIDE_X "
+ />
+
+ )
+
+}
+export default AiServiceInsideRouterList
\ No newline at end of file
diff --git a/frontend/packages/core/src/pages/aiService/api/AiServiceInsideRouterModelConfig.tsx b/frontend/packages/core/src/pages/aiService/api/AiServiceInsideRouterModelConfig.tsx
new file mode 100644
index 00000000..9f8ab6e1
--- /dev/null
+++ b/frontend/packages/core/src/pages/aiService/api/AiServiceInsideRouterModelConfig.tsx
@@ -0,0 +1,74 @@
+import { Codebox } from "@common/components/postcat/api/Codebox"
+import { PLACEHOLDER } from "@common/const/const"
+import { $t } from "@common/locales"
+import { AiProviderLlmsItems } from "@core/pages/aiSetting/AiSettingList"
+import { Form, Select, Tag } from "antd"
+import { forwardRef, useEffect, useImperativeHandle } from "react"
+
+export type AiServiceRouterModelConfigHandle = {
+ save:()=>Promise<{id:string, config:string}>
+}
+
+export type AiServiceRouterModelConfigProps = {
+ entity:AiServiceRouterModelConfigField
+ llmList:AiProviderLlmsItems[]
+}
+
+type AiServiceRouterModelConfigField = {
+ id:string
+ config:string
+}
+
+const AiServiceRouterModelConfig = forwardRef((props, ref)=>{
+ const [form] = Form.useForm();
+ const {llmList,entity} = props
+
+ useImperativeHandle(ref, ()=>({
+ save:form.validateFields
+ })
+ )
+
+ useEffect(()=>{
+ form.setFieldsValue(entity)
+ },[])
+
+ return (
+
+ )
+})
+
+export default AiServiceRouterModelConfig
\ No newline at end of file
diff --git a/frontend/packages/core/src/pages/aiService/approval/AiServiceInsideApproval.module.css b/frontend/packages/core/src/pages/aiService/approval/AiServiceInsideApproval.module.css
new file mode 100644
index 00000000..55cfe008
--- /dev/null
+++ b/frontend/packages/core/src/pages/aiService/approval/AiServiceInsideApproval.module.css
@@ -0,0 +1,9 @@
+:global .ant-tabs.ant-tabs-top{
+ height:100%;
+ .ant-tabs-content.ant-tabs-content-top{
+ height:100%;
+ .ant-tabs-tabpane.ant-tabs-tabpane-active{
+ height:100%;
+ }
+ }
+}
\ No newline at end of file
diff --git a/frontend/packages/core/src/pages/aiService/approval/AiServiceInsideApproval.tsx b/frontend/packages/core/src/pages/aiService/approval/AiServiceInsideApproval.tsx
new file mode 100644
index 00000000..1b1c10e7
--- /dev/null
+++ b/frontend/packages/core/src/pages/aiService/approval/AiServiceInsideApproval.tsx
@@ -0,0 +1,36 @@
+
+import {Tabs} from "antd";
+import {Outlet, useLocation, useNavigate} from "react-router-dom";
+import './AiServiceInsideApproval.module.css'
+import {FC, useEffect, useMemo, useState} from "react";
+import { SYSTEM_INSIDE_APPROVAL_TAB_ITEMS } from "../../../const/system/const";
+import { useGlobalContext } from "@common/contexts/GlobalStateContext";
+import { $t } from "@common/locales";
+
+
+const AiServiceInsideApproval:FC = ()=>{
+ const navigateTo = useNavigate()
+ const location = useLocation()
+ const query =new URLSearchParams(useLocation().search)
+ const currentUrl = location.pathname
+ const [pageStatus,setPageStatus] = useState<0|1>(Number(query.get('status') ||0) as 0|1)
+ const {state} = useGlobalContext()
+ const onChange = (key: string) => {
+ setPageStatus(Number(key) as 0|1)
+ navigateTo(`${currentUrl}?status=${key}`);
+ };
+
+ useEffect(() => {
+ setPageStatus(Number(query.get('status') ||0) as 0|1)
+ }, [currentUrl]);
+ const tabItems = useMemo(()=>SYSTEM_INSIDE_APPROVAL_TAB_ITEMS?.map((x)=>({...x, label:$t(x.label as string) })),[state.language])
+
+ return (
+ <>
+
+
+
+ )
+}
+
+export default AiServiceInsideApproval
\ No newline at end of file
diff --git a/frontend/packages/core/src/pages/aiService/approval/AiServiceInsideApprovalList.tsx b/frontend/packages/core/src/pages/aiService/approval/AiServiceInsideApprovalList.tsx
new file mode 100644
index 00000000..d6106a68
--- /dev/null
+++ b/frontend/packages/core/src/pages/aiService/approval/AiServiceInsideApprovalList.tsx
@@ -0,0 +1,200 @@
+
+import {ActionType} from "@ant-design/pro-components";
+import {FC, useEffect, useMemo, useRef, useState} from "react";
+import {Link, useLocation, useParams} from "react-router-dom";
+import PageList, { PageProColumns } from "@common/components/aoplatform/PageList.tsx";
+import {useBreadcrumb} from "@common/contexts/BreadcrumbContext.tsx";
+import {App, Button} from "antd";
+import {
+ SUBSCRIBE_APPROVAL_INNER_DONE_TABLE_COLUMN,
+ SUBSCRIBE_APPROVAL_INNER_TODO_TABLE_COLUMN,
+ SubscribeApprovalTableListItem, TODO_LIST_COLUMN_NOT_INCLUDE_KEY
+} from "@common/const/approval/const.tsx";
+import {BasicResponse, COLUMNS_TITLE, RESPONSE_TIPS, STATUS_CODE} from "@common/const/const.tsx";
+import {useFetch} from "@common/hooks/http.ts";
+import {RouterParams} from "@core/components/aoplatform/RenderRoutes.tsx";
+import {
+ SubscribeApprovalModalContent,
+ SubscribeApprovalModalHandle
+} from "@common/components/aoplatform/SubscribeApprovalModalContent.tsx";
+import WithPermission from "@common/components/aoplatform/WithPermission.tsx";
+import { SimpleMemberItem } from "@common/const/type.ts";
+import TableBtnWithPermission from "@common/components/aoplatform/TableBtnWithPermission.tsx";
+import { useGlobalContext } from "@common/contexts/GlobalStateContext.tsx";
+import { checkAccess } from "@common/utils/permission.ts";
+import { SubscribeApprovalInfoType } from "@common/const/approval/type.tsx";
+import { $t } from "@common/locales";
+
+const AiServiceInsideApprovalList:FC = ()=>{
+ const { setBreadcrumb } = useBreadcrumb()
+ const { modal,message } = App.useApp()
+ const {serviceId, teamId} = useParams();
+ const [init, setInit] = useState(true)
+ const {fetchData} = useFetch()
+ const [tableHttpReload, setTableHttpReload] = useState(true);
+ const [tableListDataSource, setTableListDataSource] = useState([]);
+ const pageListRef = useRef(null);
+ const query =new URLSearchParams(useLocation().search)
+ const [pageStatus,setPageStatus] = useState<0|1>(Number(query.get('status') ||0) as 0|1)
+ const subscribeRef = useRef(null)
+ const [approvalBtnLoading,setApprovalBtnLoading] = useState(false)
+ const [memberValueEnum, setMemberValueEnum] = useState([])
+ const {accessData,state} = useGlobalContext()
+
+ const openModal = async (type:'approval'|'view',entity:SubscribeApprovalTableListItem)=>{
+ message.loading($t(RESPONSE_TIPS.loading))
+ const {code,data,msg} = await fetchData>('service/approval/subscribe',{method:'GET',eoParams:{apply:entity!.id, service:serviceId,team:teamId},eoTransformKeys:['apply_project','apply_team','apply_time','approval_time']})
+ message.destroy()
+ if(code === STATUS_CODE.SUCCESS){
+ const modalIns = modal.confirm({
+ title:type === 'approval' ? $t('审批') : $t('查看'),
+ content:,
+ onOk:()=>{
+ return subscribeRef.current?.save('pass').then((res)=>res === true && manualReloadTable())
+ },
+ width:600,
+ okText:type === 'approval' ? $t('通过') : $t('确认'),
+ cancelText:type === 'approval' ?$t('取消'):$t('关闭'),
+ okButtonProps:{
+ disabled : type === 'approval' ? !checkAccess('team.service.release.approval', accessData): false
+ },
+ closable:true,
+ onCancel:()=>{setApprovalBtnLoading(false)},
+ icon:<>,
+ footer:(_, { OkBtn, CancelBtn }) =>{
+ return (
+ <>
+ {type === 'approval' ? <>
+
+
+
+ :
+ <>
+
+
+ }
+
+ )
+ },
+ })
+ }else{
+ message.error(msg || $t(RESPONSE_TIPS.error))
+ return
+ }
+ }
+
+ const operation:PageProColumns[] =[
+ {
+ title: COLUMNS_TITLE.operate,
+ key: 'option',
+ btnNums:1,
+ fixed:'right',
+ valueType: 'option',
+ render: (_: React.ReactNode, entity: SubscribeApprovalTableListItem) => [
+ pageStatus === 0 ?
+ {openModal('approval',entity)}} btnTitle="审批"/>
+ :{openModal('view',entity)}} btnTitle="查看"/>,
+ ],
+ }
+ ]
+
+ const getApprovalList = ()=>{
+ if(!tableHttpReload){
+ setTableHttpReload(true)
+ return Promise.resolve({
+ data: tableListDataSource,
+ success: true,
+ });
+ }
+ return fetchData>('service/approval/subscribes',{method:'GET',eoParams:{service:serviceId,team:teamId, status:(query.get('status') || 0)},eoTransformKeys:['apply_time','apply_project','approval_time']}).then(response=>{
+ const {code,data,msg} = response
+ if(code === STATUS_CODE.SUCCESS){
+ setTableListDataSource(data.approvals)
+ setInit((prev)=>prev ? false : prev)
+ return {data:data.approvals, success: true}
+ }else{
+ message.error(msg || $t(RESPONSE_TIPS.error))
+ return {data:[], success:false}
+ }
+ }).catch(() => {
+ return {data:[], success:false}
+ })
+ }
+
+ const getMemberList = async ()=>{
+ setMemberValueEnum([])
+ const {code,data,msg} = await fetchData>('simple/member',{method:'GET'})
+ if(code === STATUS_CODE.SUCCESS){
+ setMemberValueEnum(data.members)
+ }else{
+ message.error(msg || $t(RESPONSE_TIPS.error))
+ }
+ }
+
+ useEffect(() => {
+ !init && pageListRef.current?.reload()
+ }, [pageStatus]);
+
+
+ useEffect(() => {
+ setPageStatus(Number(query.get('status') ||0) as 0|1)
+ }, [query]);
+
+ useEffect(() => {
+ setBreadcrumb([
+ {
+ title:{$t('服务')}
+ },
+ {
+ title:$t('订阅审批')
+ }
+ ])
+ getMemberList()
+ manualReloadTable()
+ }, [serviceId]);
+
+ const manualReloadTable = () => {
+ setTableHttpReload(true); // 表格数据需要从后端接口获取
+ pageListRef.current?.reload()
+ };
+
+
+ const columns = useMemo(()=>{
+ const newColumns = [...(!(query.get('status'))? SUBSCRIBE_APPROVAL_INNER_TODO_TABLE_COLUMN:SUBSCRIBE_APPROVAL_INNER_DONE_TABLE_COLUMN)]
+ const filteredCol = pageStatus === 0 ? newColumns.filter((x)=>TODO_LIST_COLUMN_NOT_INCLUDE_KEY.indexOf(x.dataIndex as string) === -1): newColumns
+ return filteredCol.map(x=>{
+ if(x.filters &&((x.dataIndex as string[])?.indexOf('applier') !== -1 || (x.dataIndex as string[])?.indexOf('approver') !== -1) ){
+ const tmpValueEnum :Record= {}
+ memberValueEnum?.forEach((x:SimpleMemberItem)=>{
+ tmpValueEnum[x.name] = {text:$t(x.name)}
+ })
+ x.valueEnum = tmpValueEnum
+ }
+ if(x.dataIndex === 'status'){
+ x.valueEnum = new Map([
+ [0, {$t('拒绝')}],
+ [2,{$t('通过')}],
+ ])
+ }
+
+ return {...x,title: typeof x.title === 'string' ? $t(x.title as string) : x.title}})
+ },[pageStatus,memberValueEnum,state.language])
+
+ return (
+
+
getApprovalList()}
+ onChange={() => {
+ setTableHttpReload(false)
+ }}
+ onRowClick={(row:SubscribeApprovalTableListItem)=>openModal(pageStatus === 0 ? 'approval': 'view',row)}
+ tableClickAccess={pageStatus === 0 ?'team.service.subscription.approval':'team.service.subscription.view'}
+ tableClass="pr-PAGE_INSIDE_X"
+ />
+
+ {aiSettingList.map((provider:AiSettingListItem)=>(
+
+
+
+ {provider.configured ? $t('已配置') : $t('未配置')}
+
+
+
+
+
+
+
+
+
+
+
: undefined}
- icon={serviceBasicInfo?.logo ? '' :}>
+ icon={serviceBasicInfo?.logo ? '' :}>
-
{serviceName}
+
{serviceName}
+
{serviceDesc || '-'}
diff --git a/frontend/packages/market/src/pages/serviceHub/ServiceHubList.tsx b/frontend/packages/market/src/pages/serviceHub/ServiceHubList.tsx
index 29535d1b..fc3c449b 100644
--- a/frontend/packages/market/src/pages/serviceHub/ServiceHubList.tsx
+++ b/frontend/packages/market/src/pages/serviceHub/ServiceHubList.tsx
@@ -179,15 +179,15 @@ const CardTitle = (service:ServiceHubTableListItem)=>{
: undefined}> {service.logo ? '' : service.name.substring(0,1)}
-
{service.name}
+
{service.name}
{service.catalogue?.name || '-'}
- {service.apiNum ?? '-'}
+ {service.apiNum ?? '-'}
- {service.subscriberNum ?? '-'}
+ {service.subscriberNum ?? '-'}