From 449e495ba3ba5ddca5fcdc39436252eb3bc8f0ed Mon Sep 17 00:00:00 2001
From: Hu Gang <18768366022@163.com>
Date: Mon, 19 May 2025 10:22:42 +0800
Subject: [PATCH] feat: create agent app

---
 src/apis/appCenter/index.ts                   |   2 +
 src/apis/appCenter/knowledge.ts               |  29 +
 src/apis/appCenter/prompt.ts                  |  55 ++
 src/apis/index.ts                             |   4 +-
 .../createapp/components/AgentAppConfig.vue   | 752 ++++++++++++++++++
 5 files changed, 841 insertions(+), 1 deletion(-)
 create mode 100644 src/apis/appCenter/knowledge.ts
 create mode 100644 src/apis/appCenter/prompt.ts
 create mode 100644 src/views/createapp/components/AgentAppConfig.vue

diff --git a/src/apis/appCenter/index.ts b/src/apis/appCenter/index.ts
index f842150..1300da1 100644
--- a/src/apis/appCenter/index.ts
+++ b/src/apis/appCenter/index.ts
@@ -1,2 +1,4 @@
 // Copyright (c) Huawei Technologies Co., Ltd. 2023-2025. All rights reserved.
 export * from './appCenterService';
+export * from './prompt';
+export * from './knowledge';
diff --git a/src/apis/appCenter/knowledge.ts b/src/apis/appCenter/knowledge.ts
new file mode 100644
index 0000000..ab59da5
--- /dev/null
+++ b/src/apis/appCenter/knowledge.ts
@@ -0,0 +1,29 @@
+import { get, post, del } from '../server';
+
+export interface KnowledgeBase {
+  kbId: string;
+  name: string;
+  isUsed: boolean;
+  description: string;
+}
+
+const KNOWLEDGE_URL = '/api/knowledge';
+
+/**
+ * 查询Prompt列表
+ * @param keyword
+ * @returns
+ */
+const getKnowledgeList = (keyword?: string) => {
+  return get<{
+    team_kb_list: {
+      teamId: string;
+      teamName: string;
+      kb_list: KnowledgeBase[];
+    }[];
+  }>(KNOWLEDGE_URL, { kbName: keyword });
+};
+
+export const kbApi = {
+  getKnowledgeList,
+};
diff --git a/src/apis/appCenter/prompt.ts b/src/apis/appCenter/prompt.ts
new file mode 100644
index 0000000..8b11563
--- /dev/null
+++ b/src/apis/appCenter/prompt.ts
@@ -0,0 +1,55 @@
+import { get, post, del } from '../server';
+
+export interface Prompt {
+  promptId: string;
+  name: string;
+  description: string;
+  prompt?: string;
+}
+
+const PROMPT_URL = '/api/prompt';
+
+/**
+ * 查询Prompt列表
+ * @param keyword
+ * @returns
+ */
+const getPrompts = (keyword?: string) => {
+  return get<{
+    prompts: Prompt[];
+    totalPrompts: number;
+  }>(PROMPT_URL, { keyword });
+};
+
+/**
+ * 创建或更新Prompt
+ * @param params
+ * @returns
+ */
+const createOrUpdatePrompts = (params: {
+  name: string;
+  description: string;
+  prompt: string;
+  promptId?: string;
+}) => {
+  return post<{
+    promptId: string;
+  }>(PROMPT_URL, params);
+};
+
+/**
+ * 删除Prompt
+ * @param promptId
+ * @returns
+ */
+const deletePrompt = (promptId: string) => {
+  return del<{
+    promptId: string;
+  }>(`${PROMPT_URL}/${promptId}`);
+};
+
+export const promptApi = {
+  getPrompts,
+  createOrUpdatePrompts,
+  deletePrompt,
+};
diff --git a/src/apis/index.ts b/src/apis/index.ts
index 32242d5..5562d4b 100644
--- a/src/apis/index.ts
+++ b/src/apis/index.ts
@@ -19,7 +19,7 @@ import {
   mcpApi,
 } from './paths';
 import { workFlowApi } from './workFlow';
-import { appCenterApi } from './appCenter';
+import { appCenterApi, promptApi, kbApi } from './appCenter';
 
 export const api = {
   ...accountApi,
@@ -33,4 +33,6 @@ export const api = {
   ...apiApi,
   ...modelApi,
   ...mcpApi,
+  ...promptApi,
+  ...kbApi,
 };
diff --git a/src/views/createapp/components/AgentAppConfig.vue b/src/views/createapp/components/AgentAppConfig.vue
new file mode 100644
index 0000000..e5ed898
--- /dev/null
+++ b/src/views/createapp/components/AgentAppConfig.vue
@@ -0,0 +1,752 @@
+<script lang="ts" setup>
+import { CaretRight, CirclePlus } from '@element-plus/icons-vue';
+import defaultIcon from '@/assets/svgs/app_upload.svg';
+import AppInitalPreview from '@/views/dialogue/components/AppInitalPreview.vue';
+import { ref, reactive, onMounted, watch, computed } from 'vue';
+import { ElMessage, FormRules, UploadProps } from 'element-plus';
+import { useRoute, useRouter } from 'vue-router';
+import PromptDrawer from './PromptDrawer.vue';
+import DebugApp from '../components/DebugApp.vue';
+import McpDrawer from './McpDrawer.vue';
+import AssetLibraryDrawer from './AssetLibraryDrawer.vue';
+import { api } from '@/apis';
+import type { Prompt } from '@/apis/appCenter';
+import type { AddedModalList } from '@/apis/paths/type';
+import PermissionControl from './PermissionControl.vue';
+import type { Mcp } from './McpDrawer.vue';
+
+const route = useRoute();
+
+interface AgentConfig {
+  icon: string;
+  name: string;
+  description: string;
+  model: string;
+  dialogRounds: number;
+  prompt: string;
+  mcps: string[];
+  knowledge: any[];
+  permission: {
+    visibility: string;
+    authorizedUsers: string[];
+  };
+}
+
+const props = withDefaults(
+  defineProps<{
+    handleValidateContent: Function;
+    onDebug: (status: boolean) => void;
+  }>(),
+  {},
+);
+
+const activeName = ref(['base', 'multipleRounds', 'ability', 'permissions']);
+function onBaseInfoHeaderClick() {
+  activeName.value = activeName.value.includes('base')
+    ? activeName.value.filter((item) => item !== 'base')
+    : [...activeName.value, 'base'];
+}
+
+const modelOptions = ref<AddedModalList[]>([]);
+
+const isDebugDialogVisible = ref(false);
+
+const createAppForm = reactive<AgentConfig>({
+  dialogRounds: 3,
+  icon: defaultIcon,
+  name: '',
+  description: '',
+  model: '',
+  prompt: '',
+  mcps: [],
+  knowledge: [],
+  permission: {
+    visibility: 'public',
+    authorizedUsers: [],
+  },
+});
+
+const canPublish = ref(false);
+
+const selectedMcpService = computed<Mcp[]>(() =>
+  mcpList.value.filter((item) =>
+    createAppForm.mcps.includes(item.mcpserviceId),
+  ),
+);
+
+const rules = reactive<FormRules<typeof createAppForm>>({
+  name: [{ required: true, message: '请输入智能体名称', trigger: 'blur' }],
+  description: [
+    { required: true, message: '请输入智能体简介', trigger: 'blur' },
+  ],
+  model: [{ required: true, message: '请选择模型', trigger: 'blur' }],
+  dialogRounds: [
+    { required: true, message: '请选择对话轮次', trigger: 'blur' },
+  ],
+  permission: [{ required: true, message: '请选择对话轮次', trigger: 'blur' }],
+});
+
+const isPromptDrawerVisible = ref(false);
+const isMcpDrawerVisible = ref(false);
+const isAssetLibraryDrawerVisible = ref(false);
+
+async function queryAgentConfig() {
+  const [, res] = await api.querySingleAppData({
+    id: route.query?.appId as string,
+  });
+  if (res) {
+    const { name, description, permission, icon, mcpService, dialogRounds } =
+      res.result;
+    createAppForm.icon = icon || defaultIcon;
+    createAppForm.name = name;
+    createAppForm.description = description;
+    createAppForm.mcps = mcpService || [];
+    createAppForm.dialogRounds = dialogRounds || 3;
+    createAppForm.permission = permission || createAppForm.permission;
+  }
+}
+
+function onPromptSelected(p: Prompt) {
+  if (p) {
+    createAppForm.prompt = p.prompt || '';
+    isPromptDrawerVisible.value = false;
+  }
+}
+
+function onMcpServiceSelected(mcps: Mcp[]) {
+  if (mcps) {
+    createAppForm.mcps = mcps.map((item) => item.mcpserviceId);
+    isMcpDrawerVisible.value = false;
+  }
+}
+
+function onKbSelected(kbs: []) {
+  if (kbs) {
+    createAppForm.knowledge = kbs;
+    isAssetLibraryDrawerVisible.value = false;
+  }
+}
+
+function onDeleteMcp(mcp: any) {
+  if (mcp) {
+    createAppForm.mcps = createAppForm.mcps.filter(
+      (item) => item !== mcp.mcpserviceId,
+    );
+  }
+}
+
+function onDeleteKnowledge(knowledge: any) {
+  if (knowledge) {
+    createAppForm.knowledge = createAppForm.knowledge.filter(
+      (item) => item.knowledgeId !== knowledge.knowledgeId,
+    );
+  }
+}
+
+const beforeIconUpload: UploadProps['beforeUpload'] = async (rawFile) => {
+  const isLt2M = rawFile.size / 1024 / 1024 < 2;
+  if (!isLt2M) {
+    ElMessage({
+      message: 'Image size cannot exceed 2MB!',
+      type: 'error',
+    });
+    return false;
+  }
+
+  try {
+    const reader = new FileReader();
+    reader.onload = (e) => {
+      createAppForm.icon = e.target?.result as string;
+    };
+    reader.readAsDataURL(rawFile);
+    return false;
+  } catch (error) {
+    console.error('Error during file upload process:', error);
+    ElMessage({
+      message: 'An error occurred during file upload!',
+      type: 'error',
+    });
+    return false;
+  }
+};
+
+const userList = ref<
+  {
+    userName: string;
+    userSub: string;
+  }[]
+>([]);
+
+async function queryUserList() {
+  const [, res] = await api.getPartAppConfgUser();
+  if (res) {
+    userList.value = res.result.userInfoList;
+  }
+}
+
+async function queryModelList() {
+  const [, res] = await api.getAddedModels();
+  if (res) {
+    modelOptions.value = res.result;
+    if (modelOptions.value.length > 0) {
+      createAppForm.model = modelOptions.value[0].llmId;
+    }
+  }
+}
+
+const mcpList = ref<Mcp[]>([]);
+/**
+ * 查询MCP服务
+ */
+async function queryMcpList() {
+  const [, res] = await api.getMcpList({});
+  if (res) {
+    mcpList.value = res.result.services.map((item) => {
+      return {
+        ...item,
+        isChecked: false,
+      };
+    });
+  }
+}
+
+const createAppFormRef = ref();
+watch(
+  () => createAppForm,
+  async () => {
+    if (createAppFormRef.value && props.handleValidateContent) {
+      try {
+        const validate = await createAppFormRef.value.validate();
+        props.handleValidateContent(validate);
+      } catch (error) {
+        props.handleValidateContent(false);
+      }
+    }
+  },
+  { deep: true, immediate: true },
+);
+
+function onDebugSuccess(status: boolean) {
+  canPublish.value = status;
+  props.onDebug(status);
+}
+
+defineExpose({
+  openDebugDialog: () => (isDebugDialogVisible.value = true),
+  createAppForm,
+});
+
+onMounted(async () => {
+  await queryMcpList();
+  await queryUserList();
+  await queryModelList();
+  await queryAgentConfig();
+});
+</script>
+<template>
+  <div class="app-wrapper">
+    <div class="agent-config">
+      <div class="base-info" @click="onBaseInfoHeaderClick">
+        <span>基本信息</span>
+        <el-icon
+          class="collapse-icon"
+          :class="{
+            'collapse-icon-active': activeName.includes('base'),
+          }"
+        >
+          <CaretRight />
+        </el-icon>
+      </div>
+      <el-form
+        ref="createAppFormRef"
+        :model="createAppForm"
+        :rules="rules"
+        class="agent-config-edit"
+        label-position="left"
+        label-width="auto"
+      >
+        <el-collapse v-model="activeName">
+          <el-collapse-item class="hide-header" name="base">
+            <el-form-item label="图标" prop="icon">
+              <div class="upload-area">
+                <el-upload
+                  class="uploader"
+                  :show-file-list="false"
+                  :before-upload="beforeIconUpload"
+                  :accept="'image/*'"
+                >
+                  <div class="uploader-icon">
+                    <img :src="createAppForm.icon" alt="" />
+                  </div>
+                </el-upload>
+                <span class="text">上传图标</span>
+              </div>
+            </el-form-item>
+
+            <el-form-item label="智能体名称" prop="name">
+              <el-input
+                v-model="createAppForm.name"
+                placeholder="请输入智能体名称"
+              ></el-input>
+            </el-form-item>
+
+            <el-form-item label="智能体简介" prop="description">
+              <el-input
+                v-model="createAppForm.description"
+                type="textarea"
+                :maxlength="150"
+                show-word-limit
+                :rows="4"
+                placeholder="请输入智能体简介"
+              ></el-input>
+            </el-form-item>
+
+            <el-form-item label="模型选择" prop="model">
+              <el-select
+                v-model="createAppForm.model"
+                style="width: 100%"
+                placeholder="请选择模型"
+              >
+                <el-option
+                  v-for="model in modelOptions"
+                  :key="model.llmId"
+                  :label="model.modelName"
+                  :value="model.llmId"
+                >
+                  <div
+                    :style="{
+                      display: 'flex',
+                      alignItems: 'center',
+                    }"
+                  >
+                    <img
+                      style="width: 14px; height: 14px"
+                      :src="model.icon"
+                      alt=""
+                    />
+                    <span style="margin-left: 5px">{{ model.modelName }}</span>
+                  </div>
+                </el-option>
+                <template #label>
+                  <div
+                    :style="{
+                      display: 'flex',
+                      alignItems: 'center',
+                    }"
+                  >
+                    <img
+                      style="width: 14px; height: 14px"
+                      :src="
+                        modelOptions.find(
+                          (item) => item.llmId === createAppForm.model,
+                        )?.icon || defaultIcon
+                      "
+                      alt=""
+                    />
+                    <span style="margin-left: 5px">
+                      {{
+                        modelOptions.find(
+                          (item) => item.llmId === createAppForm.model,
+                        )?.modelName
+                      }}
+                    </span>
+                  </div>
+                </template>
+              </el-select>
+            </el-form-item>
+
+            <el-form-item label="提示词" prop="prompt" class="prompt-form-item">
+              <el-button
+                :icon="CirclePlus"
+                text
+                @click="isPromptDrawerVisible = true"
+              >
+                插入模板
+              </el-button>
+              <el-input
+                v-model="createAppForm.prompt"
+                style="margin-top: 8px"
+                type="textarea"
+                :maxlength="150"
+                show-word-limit
+                :rows="12"
+                placeholder="请在这里编写提示词，包括角色设定、任务目标、具备的能力及恢复的要求与限制等。好的提示词会直接影响智能体效果"
+              ></el-input>
+            </el-form-item>
+          </el-collapse-item>
+
+          <el-collapse-item name="multipleRounds">
+            <template #title>
+              <span class="collapse-title">多轮对话</span>
+              <el-icon
+                class="collapse-icon"
+                :class="{
+                  'collapse-icon-active': activeName.includes('multipleRounds'),
+                }"
+              >
+                <CaretRight />
+              </el-icon>
+            </template>
+            <el-form-item label="请选择对话轮次" prop="dialogRounds">
+              <div class="multi-session">
+                <el-input-number
+                  v-model="createAppForm.dialogRounds"
+                  :step="1"
+                  :value-on-clear="3"
+                  :min="1"
+                  :max="10"
+                ></el-input-number>
+                <span>(1 ~ 10)</span>
+              </div>
+            </el-form-item>
+          </el-collapse-item>
+
+          <el-collapse-item name="ability">
+            <template #title>
+              <span class="collapse-title">能力配置</span>
+              <el-icon
+                class="collapse-icon"
+                :class="{
+                  'collapse-icon-active': activeName.includes('ability'),
+                }"
+              >
+                <CaretRight />
+              </el-icon>
+            </template>
+            <el-form-item label="MCP服务" prop="mcps">
+              <div class="mcp-adder">
+                <div class="mcp-button">
+                  <el-button
+                    :icon="CirclePlus"
+                    text
+                    @click="isMcpDrawerVisible = true"
+                  >
+                    添加MCP服务
+                  </el-button>
+                  <span class="mcp-count">
+                    {{ createAppForm.mcps.length }}/5
+                  </span>
+                </div>
+                <div class="mcp-list">
+                  <template
+                    v-for="item in selectedMcpService"
+                    :keys="item.mcpserviceId"
+                  >
+                    <div class="mcp-item">
+                      <div class="mcp-content">
+                        <img :src="item.icon" alt="" />
+                        <span>{{ item.name }}</span>
+                      </div>
+                      <el-tooltip content="删除" placement="top">
+                        <img
+                          src="@/assets/svgs/light_delete.svg"
+                          alt=""
+                          @click="onDeleteMcp(item)"
+                        />
+                      </el-tooltip>
+                    </div>
+                  </template>
+                </div>
+              </div>
+            </el-form-item>
+            <el-form-item label="知识库">
+              <div class="mcp-adder">
+                <div class="mcp-button">
+                  <el-button
+                    :icon="CirclePlus"
+                    text
+                    @click="isAssetLibraryDrawerVisible = true"
+                  >
+                    添加知识库
+                  </el-button>
+                  <span class="mcp-count">
+                    {{ createAppForm.knowledge.length }}/5
+                  </span>
+                </div>
+                <div class="mcp-list">
+                  <template
+                    v-for="item in createAppForm.knowledge"
+                    :keys="item.kbId"
+                  >
+                    <div class="mcp-item">
+                      <div class="mcp-content">
+                        <span>{{ item.kbName }}</span>
+                      </div>
+                      <el-tooltip content="删除" placement="top">
+                        <img
+                          src="@/assets/svgs/light_delete.svg"
+                          alt=""
+                          @click="onDeleteKnowledge(item)"
+                        />
+                      </el-tooltip>
+                    </div>
+                  </template>
+                </div>
+              </div>
+            </el-form-item>
+          </el-collapse-item>
+
+          <el-collapse-item name="permissions">
+            <template #title>
+              <span class="collapse-title">权限配置</span>
+              <el-icon
+                class="collapse-icon"
+                :class="{
+                  'collapse-icon-active': activeName.includes('permissions'),
+                }"
+              >
+                <CaretRight />
+              </el-icon>
+            </template>
+            <el-form-item label="权限" prop="permission" class="permissionItem">
+              <PermissionControl
+                v-model:visibility="createAppForm.permission.visibility as any"
+                :optional-list="
+                  userList.map((item) => ({
+                    label: item.userName,
+                    key: item.userSub,
+                  }))
+                "
+                v-model:checked-list="createAppForm.permission.authorizedUsers"
+              />
+            </el-form-item>
+          </el-collapse-item>
+        </el-collapse>
+      </el-form>
+    </div>
+
+    <div class="agent-config-preview">
+      <div class="preview-title">界面预览</div>
+      <div class="preview-content">
+        <AppInitalPreview
+          :createAppForm="{ ...createAppForm, ...{ mcps: selectedMcpService } }"
+        />
+      </div>
+    </div>
+
+    <PromptDrawer
+      v-model:visible="isPromptDrawerVisible"
+      @confirm="onPromptSelected"
+    ></PromptDrawer>
+    <McpDrawer
+      v-model:visible="isMcpDrawerVisible"
+      :checked-list="createAppForm.mcps"
+      @confirm="onMcpServiceSelected"
+    ></McpDrawer>
+    <AssetLibraryDrawer
+      v-model:visible="isAssetLibraryDrawerVisible"
+      @confirm="onKbSelected"
+    ></AssetLibraryDrawer>
+
+    <DebugApp
+      v-model:visible="isDebugDialogVisible"
+      :config="{ ...createAppForm, ...{ mcps: selectedMcpService } }"
+      @success="onDebugSuccess"
+    />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.app-wrapper {
+  display: flex;
+
+  width: 100%;
+  .el-input > .el-input__wrapper {
+    --o-input-border-radius: 4px;
+  }
+  .el-input-number {
+    --o-input-number-btn-border-radius: 14px;
+  }
+
+  .el-textarea {
+    --o-textarea-border-radius: 4px;
+  }
+
+  .agent-config {
+    display: flex;
+
+    flex-direction: column;
+    .base-info {
+      display: flex;
+      align-items: center;
+      font-weight: 700;
+      color: var(--o-text-color-primary);
+      margin-bottom: 10px;
+      padding-left: 6px;
+      cursor: pointer;
+      font-size: 16px;
+    }
+
+    .collapse-icon {
+      margin-left: 8px;
+      color: var(--o-text-color-primary);
+      &-active {
+        transform: rotate(90deg);
+      }
+    }
+
+    &-edit {
+      padding-right: 32px;
+      width: 560px;
+      overflow: scroll;
+      :deep(.el-form-item__label) {
+        position: relative;
+        text-align: justify;
+        text-align-last: justify;
+        padding-left: 8px;
+        &::before {
+          position: absolute;
+          left: 0;
+          top: 25%;
+        }
+      }
+
+      .hide-header {
+        :deep(.el-collapse-item__header) {
+          display: none;
+        }
+      }
+
+      .collapse-title {
+        margin-left: 6px;
+        color: var(--o-text-color-primary);
+      }
+
+      .upload-area {
+        display: flex;
+        flex-direction: column;
+        .uploader {
+          cursor: pointer;
+
+          .uploader-icon {
+            position: relative;
+            img {
+              width: 48px;
+              height: 48px;
+              border-radius: 50%;
+            }
+            &::after {
+              content: '';
+              display: inline-block;
+              width: 16px;
+              height: 16px;
+              background-image: url('@/assets/svgs/upload_icon.svg');
+              position: absolute;
+              right: 2px;
+              bottom: 12px;
+            }
+          }
+        }
+        .text {
+          height: 16px;
+          line-height: 12px;
+          color: rgb(141, 152, 170);
+        }
+      }
+
+      .prompt-form-item {
+        :deep(.el-form-item__label) {
+          padding-top: 0;
+        }
+      }
+
+      .multi-session {
+        display: flex;
+        align-items: center;
+        gap: 16px;
+        span {
+          font-size: 12px;
+          color: var(--o-text-color-tertiary);
+        }
+      }
+
+      .mcp-adder {
+        width: 100%;
+        .mcp-button {
+          display: flex;
+          align-items: center;
+          gap: 8px;
+        }
+
+        .mcp-count {
+          color: var(--o-text-color-tertiary);
+        }
+
+        .mcp-list {
+          display: flex;
+          flex-direction: column;
+          gap: 8px;
+          .mcp-item {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            background-color: var(--el-collapse-header-bg);
+            height: 40px;
+            border-radius: 4px;
+            padding: 0 15px;
+
+            .mcp-content {
+              display: flex;
+              align-items: center;
+              gap: 8px;
+              img {
+                width: 24px;
+                height: 24px;
+              }
+            }
+            img {
+              cursor: pointer;
+            }
+          }
+        }
+      }
+    }
+    &-preview {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+
+      .preview-title {
+        line-height: 24px;
+        font-size: 16px;
+        font-weight: 700;
+        color: var(--o-text-color-primary);
+      }
+
+      .preview-content {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        height: calc(100% - 32px);
+        border-radius: 8px;
+        background-image: var(--o-bg-image);
+        overflow: auto;
+        background-repeat: no-repeat;
+        background-position: center;
+        background-size: cover;
+        :deep(.copilot-footer) {
+          margin-bottom: 12px;
+        }
+      }
+    }
+  }
+
+  :deep(.el-form) {
+    margin: 0;
+  }
+  :deep(.el-collapse) {
+    margin-top: 0;
+    .el-collapse-item__header {
+      padding: 0;
+      font-size: 16px;
+      font-weight: 700;
+      color: #000;
+      height: 24px;
+    }
+    .el-collapse-item__content {
+      margin: 0;
+    }
+  }
+}
+</style>
-- 
Gitee