+
+
![]()
+
+
{{ props.fileParams.name }}
+
+
+ {{ props.fileParams.size }}
+
+
+
![]()
+
+ {{ $t(currentStatusItem.content) }}
+
-
-

-

-
-
-

-

-
-
-
-
![]()
-
{{ props.fileParams.name }}
+
+

+

+
+
+

+
+
+
+
![]()
+
{{ props.fileParams.name }}
+
+
diff --git a/src/views/api/style.scss b/src/views/api/style.scss
new file mode 100644
index 0000000000000000000000000000000000000000..12a467348f040bab4d3c463751b8d12183028a48
--- /dev/null
+++ b/src/views/api/style.scss
@@ -0,0 +1,239 @@
+.apiCenterBox {
+ display: flex;
+ justify-content: center;
+ min-width: 1032px;
+ .apiCenterMain {
+ color: var(--o-text-color-secondary);
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ margin-top: 48px;
+ .apiCenterTitle {
+ color: var(--o-text-color-primary);
+ font-size: 24px;
+ font-weight: 700;
+ line-height: 36px;
+ margin-bottom: 16px;
+ }
+ .apiCenterSearch {
+ margin-bottom: 32px;
+ :first-of-type .el-input__wrapper {
+ width: 280px;
+ border-radius: 0px 4px 4px 0px;
+ }
+ .el-input-group__prepend {
+ border-radius: 4px 0px 0px 4px;
+ .el-input__wrapper {
+ border-radius: 4px 0px 0px 4px;
+ }
+ }
+
+ .createApi {
+ margin-left: 16px;
+ border-radius: 4px;
+ }
+ }
+
+ .apiCenterType {
+ display: flex;
+ width: 400px;
+ height: 32px;
+ align-items: center;
+ justify-content: space-between;
+ gap: 2px;
+ border-radius: 4px;
+ background-color: var(--o-border-color-base);
+ .apiCenterBtn {
+ width: 130px;
+ height: 28px;
+ display: flex;
+ font-size: 12px;
+ justify-content: center;
+ align-items: center;
+ border-radius: 4px;
+ cursor: pointer;
+ color: var(--o-text-color-primary);
+ }
+ }
+ .apiCenterCardContainer {
+ margin-top: 12px;
+ padding-top: 4px;
+ max-width: 1336px;
+ max-height: calc(100vh - 370px);
+ min-height: calc(100vh - 370px);
+ min-width: 1336px;
+ overflow-y: auto;
+ .apiCenterCardBox {
+ width: fit-content;
+ display: flex;
+ flex-wrap: wrap;
+ box-sizing: border-box;
+ gap: 16px;
+ .apiCenterCardSingle {
+ box-sizing: border-box;
+ border: 1px solid transparent;
+ cursor: pointer;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ border-radius: 8px;
+ width: 320px;
+ height: 136px;
+ padding: 16px;
+ background-color: var(--o-bg-color-base);
+ .apiCenterCardTop {
+ display: flex;
+ .apiCenterCardIcon {
+ margin-right: 18px;
+ display: flex;
+ align-items: center;
+ .menu-icon {
+ width: 48px;
+ height: 48px;
+ }
+ }
+ .apiCenterCardContent {
+ cursor: pointer;
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+ .apiCenterCardContentTop {
+ display: flex;
+ justify-content: space-between;
+ .apiCenterCardContentTitle {
+ color: var(--o-text-color-primary);
+ font-size: 16px;
+ line-height: 24px;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ width: 80%;
+ }
+ .apiCenterCardContentCollect {
+ width: 24px;
+ height: 24px;
+ background-color: var(--o-bg-color-light);
+ border-radius: 8px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ svg {
+ width: 16px;
+ height: 16px;
+ path {
+ fill: var(--o-text-color-tertiary);
+ }
+ }
+ .apiFavorite {
+ path {
+ fill: rgb(99, 149, 253);
+ }
+ }
+ }
+ }
+ .apiCenterCardContentDes {
+ .vue-text{
+ cursor: pointer !important;
+ color: var(--o-api-description);
+ }
+ font-size: 14px;
+ line-height: 22px;
+ }
+ }
+ }
+ .apiCenterCardBottom {
+ margin-top: 16px;
+ display: flex;
+ justify-content: space-between;
+ .apiCenterCardUser {
+ font-size: 12px;
+ line-height: 16px;
+ }
+ .apiCenterCardOps {
+ .el-button span {
+ color: #6395fd;
+ font-size: 12px;
+ }
+ }
+ }
+ }
+ .apiCenterCardSingle:hover {
+ box-sizing: border-box;
+ border: 1px solid #7aa5ff;
+ box-shadow: 0px 3px 9px 0px rgba(0, 0, 0, 0.2) !important;
+ background: linear-gradient(
+ 127deg,
+ rgba(109, 117, 250, 0.07) 1.003%,
+ rgba(90, 179, 255, 0.07) 98.421%
+ ) !important;
+ }
+ }
+ .appCenterNoData {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+ align-items: center;
+ margin-top: 16px;
+ .noDataIcon {
+ width: 320px;
+ height: 130px;
+ background: var(--no-work-flow) center center no-repeat;
+ background-size: contain;
+ }
+ .desc {
+ height: 16px;
+ font-size: 12px;
+ color: var(--o-text-color-primary);
+ }
+ }
+ }
+ ::-webkit-scrollbar {
+ width: 4px;
+ height: 8px;
+ background: transparent;
+ }
+ @media screen and (width <= 1400px) {
+ .apiCenterCardContainer {
+ width: 1000px;
+ }
+ }
+
+ :deep(.el-pagination) {
+ margin-top: 16px;
+ .el-select__wrapier {
+ background-color: transparent;
+ }
+ }
+ }
+ .apiCenterBtnActive {
+ background-color: var(--o-color-primary) !important;
+ border-color: var(--o-color-primary) !important;
+ color: var(--o-color-white) !important;
+ }
+}
+// 应用中心删除二次提示样式
+.el-message-box {
+ min-width: 400px;
+ padding: 0px !important;
+ border-radius: 8px;
+ .el-message-box__headerbtn {
+ width: 16px;
+ height: 16px;
+ right: 20px;
+ }
+ .el-message-box__status {
+ top: 0px;
+ }
+ .el-message-box__message {
+ padding-left: 4px;
+ }
+ .el-message-box__btns {
+ flex-direction: row;
+ .el-button {
+ width: 64px;
+ height: 24px;
+ }
+ }
+}
diff --git a/src/views/app/index.vue b/src/views/app/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..dcc9bb5781cfc6c1ba5caffe380e6524c90ae8ff
--- /dev/null
+++ b/src/views/app/index.vue
@@ -0,0 +1,350 @@
+
+
+
+
+
{{ $t('app.app_center') }}
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ $t('app.app_create') }}
+
+
+
+
+ {{ $t('app.all_app') }}
+
+
+ {{ $t('app.my_created') }}
+
+
+ {{ $t('app.my_favorite') }}
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ appItem.name }}
+
+
+
+
+
+
+
+
+
+
+
+
+
@{{ appItem.author }}
+
+
+ {{ $t('app.app_edit') }}
+
+
+ {{ $t('app.app_delete') }}
+
+
+
+
+
+
{{ $t('app.unpublished') }}
+
+
+
+
+
+
{{ $t('app.no_data') }}
+
+
+
+
+
+
+
+
diff --git a/src/views/app/style.scss b/src/views/app/style.scss
new file mode 100644
index 0000000000000000000000000000000000000000..01c084838dbda414ad486f8c5c3a1d020db8ae31
--- /dev/null
+++ b/src/views/app/style.scss
@@ -0,0 +1,247 @@
+.appCenterBox {
+ display: flex;
+ justify-content: center;
+ min-width: 1032px;
+ .appCenterMain {
+ color: var(--o-text-color-secondary);
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ margin-top: 48px;
+ .appCenterTitle {
+ color: var(--o-text-color-primary);
+ font-size: 24px;
+ font-weight: 700;
+ line-height: 36px;
+ margin-bottom: 16px;
+ }
+ .appCenterSearch {
+ margin-bottom: 32px;
+ :first-of-type .el-input__wrapper {
+ width: 280px;
+ border-radius: 0px 4px 4px 0px;
+ }
+ .el-input-group__prepend {
+ border-radius: 4px 0px 0px 4px;
+ .el-input__wrapper {
+ border-radius: 4px 0px 0px 4px;
+ }
+ }
+ .el-input {
+ > .el-input__wrapper {
+ padding: 0 8px;
+ }
+ }
+
+ .createApp {
+ margin-left: 16px;
+ border-radius: 4px;
+ }
+ }
+
+ .appCenterType {
+ display: flex;
+ width: 400px;
+ height: 32px;
+ align-items: center;
+ justify-content: space-between;
+ gap: 2px;
+ border-radius: 4px;
+ background-color: var(--o-border-color-base);
+ .appCenterBtn {
+ width: 130px;
+ height: 28px;
+ display: flex;
+ font-size: 12px;
+ justify-content: center;
+ align-items: center;
+ border-radius: 4px;
+ cursor: pointer;
+ color: var(--o-text-color-primary);
+ }
+ }
+ .appCenterCardContainer {
+ margin-top: 12px;
+ padding-top: 4px;
+ width: 1340px;
+ max-height: calc(100vh - 370px);
+ min-height: calc(100vh - 370px);
+ overflow-y: auto;
+ .appCenterCardBox {
+ width: fit-content;
+ display: flex;
+ flex-wrap: wrap;
+ box-sizing: border-box;
+ gap: 16px;
+ .appCenterCardSingle {
+ box-sizing: border-box;
+ border: 1px solid transparent;
+ cursor: pointer;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ border-radius: 8px;
+ width: 320px;
+ height: 136px;
+ padding: 16px;
+ background-color: var(--o-bg-color-base);
+ .appCenterCardTop {
+ cursor: pointer;
+ display: flex;
+ max-height: 66px;
+ .appCenterCardIcon {
+ width: 80px;
+ height: 50px;
+ display: flex;
+ align-items: center;
+ .menu-icon {
+ width: 40px;
+ }
+ }
+ .appCenterCardContent {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+ flex-shrink: 0;
+ min-width: 0;
+ .appCenterCardContentTop {
+ display: flex;
+ justify-content: space-between;
+ .appCenterCardContentTitle {
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ width: 80%;
+ color: var(--o-text-color-primary);
+ font-size: 16px;
+ line-height: 24px;
+ }
+ .appCenterCardContentCollect {
+ width: 24px;
+ height: 24px;
+ background-color: var(--o-bg-color-light);
+ border-radius: 8px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ svg {
+ width: 16px;
+ height: 16px;
+ path {
+ fill: var(--o-text-color-tertiary);
+ }
+ }
+ .appFavorite {
+ path {
+ fill: rgb(99, 149, 253);
+ }
+ }
+ }
+ }
+ .appCenterCardContentDes {
+ .vue-text{
+ cursor: pointer !important;
+ color: var(--o-api-description);
+ }
+ font-size: 14px;
+ line-height: 22px;
+ }
+ }
+ }
+ .appCenterCardBottom {
+ cursor: pointer;
+ margin-top: 16px;
+ display: flex;
+ justify-content: space-between;
+ .appCenterCardUser {
+ font-size: 12px;
+ line-height: 16px;
+ }
+ .appCenterCardOps {
+ .el-button span {
+ color: #6395fd;
+ font-size: 12px;
+ }
+ }
+ }
+ }
+ .appCenterCardSingle:hover {
+ box-sizing: border-box;
+ border: 1px solid #7aa5ff;
+ box-shadow: 0px 3px 9px 0px rgba(0, 0, 0, 0.2) !important;
+ background: linear-gradient(
+ 127deg,
+ rgba(109, 117, 250, 0.07) 1.003%,
+ rgba(90, 179, 255, 0.07) 98.421%
+ ) !important;
+ }
+ }
+ .appCenterNoData {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+ align-items: center;
+ margin-top: 16px;
+ .noDataIcon {
+ width: 320px;
+ height: 130px;
+ background: var(--no-work-flow) center center no-repeat;
+ background-size: contain;
+ }
+ .desc {
+ height: 16px;
+ font-size: 12px;
+ color: var(--o-text-color-primary);
+ }
+ }
+ }
+ ::-webkit-scrollbar {
+ width: 4px;
+ height: 8px;
+ background: transparent;
+ }
+ @media screen and (width <= 1400px) {
+ .appCenterCardContainer {
+ width: 1004px;
+ }
+ }
+
+ .el-pagination {
+ margin-top: 16px;
+ .el-select__wrapper {
+ background-color: transparent;
+ }
+ }
+ }
+ .appCenterBtnActive {
+ background-color: var(--o-color-primary) !important;
+ border-color: var(--o-color-primary) !important;
+ color: var(--o-color-white) !important;
+ }
+}
+// 应用中心删除二次提示样式
+.el-message-box {
+ min-width: 400px;
+ padding: 0px !important;
+ border-radius: 8px;
+ .el-message-box__headerbtn {
+ width: 16px;
+ height: 16px;
+ right: 20px;
+ }
+ .el-message-box__status {
+ top: 0px;
+ }
+ .el-message-box__message {
+ padding-left: 4px;
+ }
+ .el-message-box__btns {
+ flex-direction: row;
+ .el-button {
+ width: 64px;
+ height: 24px;
+ }
+ }
+}
diff --git a/src/views/createapp/components/CustomControl.vue b/src/views/createapp/components/CustomControl.vue
new file mode 100644
index 0000000000000000000000000000000000000000..d5845a8388be2b9f8c60ff5538cc98fb32d0cb38
--- /dev/null
+++ b/src/views/createapp/components/CustomControl.vue
@@ -0,0 +1,201 @@
+
+
+
+
+ {{ `${Number((zommChangeValue * 100).toFixed(0))}%` }}
+
+
+
+
+
+
+
+
+
+ 缩小
+
+ = 2 ? zommChangeValue : zommChangeValue + 0.1,
+ )
+ "
+ >
+ 放大
+
+
+ 自适应
+
+
+ 缩放到50%
+
+
+ 缩放到100%
+
+
+ 缩放到150%
+
+
+ 缩放到200%
+
+
+
+
+
+
+

+
+
+
+
+
+
diff --git a/src/views/createapp/components/appConfig.vue b/src/views/createapp/components/appConfig.vue
new file mode 100644
index 0000000000000000000000000000000000000000..fced29591be0cd0a50c6dc0583f093f7ffd919ce
--- /dev/null
+++ b/src/views/createapp/components/appConfig.vue
@@ -0,0 +1,563 @@
+
+
+
+
+
+
+ 基本信息
+
+
+
+
+
+
+
+
+ 基本信息
+
+
+
+
+
+
+
+
+
+
+
+
上传图标
+
+
+
+
+
+
+
+
+
+
+
+
+ 添加链接
+
+ 最多添加5个链接
+
+
+
+
+
+
+
+
+
+
+
+
+ 添加问题
+
+ 最多添加3个问题
+
+
+
+
+
+
+
+
+
+
+
+ 多轮对话
+
+
+
+
+
+
+
+ (1 ~ 10)
+
+
+
+
+
+ 权限配置
+
+
+
+
+
+
+
+
+ {{ item.label }}
+
+
+
+
+
+
+
可选
+
{{ curPersonList.length }}
+
+
+
+
+
+
+ {{ item?.userName }}
+
+
+
+
+
+
+
已选
+
+ {{ createAppForm.permission.authorizedUsers.length }}
+
+
+
+
+
+
+ {{ item }}
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/views/createapp/components/codeMirror/mirrorTextArea.vue b/src/views/createapp/components/codeMirror/mirrorTextArea.vue
new file mode 100644
index 0000000000000000000000000000000000000000..0a504442ef8d773b083c0559d75b5661dd20d351
--- /dev/null
+++ b/src/views/createapp/components/codeMirror/mirrorTextArea.vue
@@ -0,0 +1,103 @@
+
+
+
+
+
diff --git a/src/views/createapp/components/codeMirror/nodeMirrorText.vue b/src/views/createapp/components/codeMirror/nodeMirrorText.vue
new file mode 100644
index 0000000000000000000000000000000000000000..c5b5adc62a80fdb21e7c7a11efeebfe3a2a2ae7c
--- /dev/null
+++ b/src/views/createapp/components/codeMirror/nodeMirrorText.vue
@@ -0,0 +1,225 @@
+
+
+
+
+
+
+
+ {{ resultInfo.title }}
+
+
+ {{ resultInfo.time }}
+
+ 展开结果
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/views/createapp/components/types.ts b/src/views/createapp/components/types.ts
new file mode 100644
index 0000000000000000000000000000000000000000..e80c3b4df5b17267d080800b073e4a0968ad2478
--- /dev/null
+++ b/src/views/createapp/components/types.ts
@@ -0,0 +1,144 @@
+// Copyright (c) Huawei Technologies Co., Ltd. 2023-2024. All rights reserved.
+// licensed under the Mulan PSL v2.
+// You can use this software according to the terms and conditions of the Mulan PSL v2.
+// You may obtain a copy of Mulan PSL v2 at:
+// http://license.coscl.org.cn/MulanPSL2
+// THIS SOFTWARE IS PROVIDED ON AN 'AS IS' BASIS, WITHOUT WARRANTIES OF ANY KIND, EITHER EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT, MERCHANTABILITY OR FIT FOR A PARTICULAR
+// PURPOSE.
+// See the Mulan PSL v2 for more details.
+import type {
+ UserDialoguePanelType,
+ RobotDialoguePanelType,
+} from 'src/components/dialoguePanel/type';
+
+// 引入图片--系统下相关的图标
+import KENOWLEDGE_BASE from '@/assets/svgs/knowledgeBase.svg';
+import LLM from '@/assets/svgs/LLM.svg';
+import CONDITION from '@/assets/svgs/condition.svg';
+import LOOP from '@/assets/svgs/loop.svg';
+import TEMPLATE_CONVERSION from '@/assets/svgs/templateConversion.svg';
+// 引入图片--Aops-apollo相关图标
+import QUERY from '@/assets/svgs/query.svg';
+import get_CVE_DETAIL from '@/assets/svgs/getCveDetail.svg';
+// 引入图片--Euler-Copilot-tune相关图标
+import GATHER_METRICS from '@/assets/svgs/gatherMetrics.svg';
+// 引入图片--其他相关图标
+import API from '@/assets/svgs/API.svg';
+import TASK_CHOICE from '@/assets/svgs/taskChoice.svg';
+// 引入图片--用户自上传相关图标
+import USER_CODE from '@/assets/svgs/userCode.svg';
+import USER_DATABASE_CLASS from '@/assets/svgs/userDatabaseClass.svg';
+import USER_DOCUMENT_CLASS from '@/assets/svgs/userDatabaseClass.svg';
+// 工具类型
+export type LinkType = 'redirect' | 'action';
+
+export enum BranchSourceIdType {
+ SOURCEA = 'source_a',
+ SOURCEB = 'source_b',
+}
+
+// 这里配置的是各节点运行状态
+export const StatusInfoTitle = {
+ default: '',
+ success: '运行成功',
+ error: '运行失败',
+ running: '运行中',
+ pending: '运行中',
+};
+
+// 这里配置工作流画布默认的viewPort缩放级别
+export const DefaultViewPortZoom = 0.8;
+
+// 这里是对应的图标
+export const nodeTypeToIcon = {
+ // 系统相关图标
+ KENOWLEDGE_BASE,
+ LLM,
+ CONDITION,
+ LOOP,
+
+ // Aops-apollo相关
+ QUERY,
+ get_CVE_DETAIL,
+
+ // Euler-Copilot-tune相关图标
+ GATHER_METRICS,
+
+ // 其他相关图标
+ API,
+ TASK_CHOICE,
+
+ // 用户自上传相关图标
+ USER_CODE,
+ USER_DATABASE_CLASS,
+ USER_DOCUMENT_CLASS,
+};
+
+// 这里是对应的图标
+export const iconTypeList = [
+ { name: 'HTTP请求', value: 'API', icon: API, class: 'otherNode' },
+ { name: '大模型', value: 'LLM', icon: LLM, class: 'systemNode' },
+ { name: '知识库', value: 'RAG', icon: KENOWLEDGE_BASE, class: 'systemNode' },
+ {
+ name: '问题推荐',
+ value: 'Suggestion',
+ icon: get_CVE_DETAIL,
+ class: 'aposNode',
+ },
+];
+
+// 根据类型获取类名
+export const getNodeClass = (node) => {
+ // 默认类名
+ let defaultClass = 'systemNode';
+ iconTypeList.forEach((item) => {
+ if (item.value === node?.callId) {
+ defaultClass = item.class;
+ }
+ });
+ return defaultClass;
+};
+
+// 获取节点图标
+export const getSrcIcon = (node) => {
+ // 默认的图标
+ let defaultIcon = nodeTypeToIcon.TASK_CHOICE;
+ iconTypeList.forEach((item) => {
+ if (item.value === node?.callId) {
+ defaultIcon = item.icon;
+ }
+ });
+ return defaultIcon;
+};
+
+export interface LinkItem {
+ key: string;
+ label: string;
+ type: LinkType;
+ url?: string;
+ icon?: any;
+}
+
+export interface EgItem {
+ icon?: any;
+ iconDark?: any;
+ key: string;
+ insertMessage: string;
+ style?: string;
+ title: string;
+ des?: string;
+}
+
+export interface ChainItem {
+ key: string;
+ label: string;
+ type: string;
+ url?: string;
+ icon?: any;
+}
+
+export interface ListItem {
+ id: string;
+ value: string | null;
+}
diff --git a/src/views/createapp/components/workFlow.vue b/src/views/createapp/components/workFlow.vue
new file mode 100644
index 0000000000000000000000000000000000000000..fc9144b63628b9f503177c49e270b43dfec79c8c
--- /dev/null
+++ b/src/views/createapp/components/workFlow.vue
@@ -0,0 +1,1030 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ item.name }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
{{ StatusInfoTitle[debugStatus] }}
+
+ {{ debugTime }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/views/createapp/components/workFlowConfig/BranchNode.vue b/src/views/createapp/components/workFlowConfig/BranchNode.vue
new file mode 100644
index 0000000000000000000000000000000000000000..0c0a78190a98483f184c75691b512e6695a6afec
--- /dev/null
+++ b/src/views/createapp/components/workFlowConfig/BranchNode.vue
@@ -0,0 +1,217 @@
+
+
+
+
+
+
+
+
+
+
+
+
{{ props.data.name }}
+
+
+ ···
+
+ 编辑
+
+
+ 删除
+
+
+
+
+
+ {{ props.data.description }}
+
+
+
+ {{ item.description }}
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/views/createapp/components/workFlowConfig/CustomEdge.vue b/src/views/createapp/components/workFlowConfig/CustomEdge.vue
new file mode 100644
index 0000000000000000000000000000000000000000..1650f0456bbcae9cdc2ab41b13beeb288efedb4f
--- /dev/null
+++ b/src/views/createapp/components/workFlowConfig/CustomEdge.vue
@@ -0,0 +1,180 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/views/createapp/components/workFlowConfig/CustomNode.vue b/src/views/createapp/components/workFlowConfig/CustomNode.vue
new file mode 100644
index 0000000000000000000000000000000000000000..4a7d0c875dbe8c741182ef453d272389f2e24fea
--- /dev/null
+++ b/src/views/createapp/components/workFlowConfig/CustomNode.vue
@@ -0,0 +1,212 @@
+
+
+
+
+
+
+
+
+
![]()
+
+
+
+
{{ props.data.name }}
+
+
+
+ ID:
+
+ {{ props.id }}
+
+
+
+
+
+
+
+
+
+
+
+
+ 编辑
+
+
+ 删除
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/views/createapp/components/workFlowConfig/CustomSaENode.vue b/src/views/createapp/components/workFlowConfig/CustomSaENode.vue
new file mode 100644
index 0000000000000000000000000000000000000000..045a1d96cd42b7d27a6dc89514b5073278a4d9df
--- /dev/null
+++ b/src/views/createapp/components/workFlowConfig/CustomSaENode.vue
@@ -0,0 +1,135 @@
+
+
+
+
+
+
+
+
+
+
{{ props.data.name }}
+
+
+
+
+
+
diff --git a/src/views/createapp/components/workFlowConfig/Sidebar.vue b/src/views/createapp/components/workFlowConfig/Sidebar.vue
new file mode 100644
index 0000000000000000000000000000000000000000..32cefaede0095c8d1b8e82eb21bb7df3ec82d2d1
--- /dev/null
+++ b/src/views/createapp/components/workFlowConfig/Sidebar.vue
@@ -0,0 +1,38 @@
+
+
+
+
+
diff --git a/src/views/createapp/components/workFlowConfig/SpecialEdge.vue b/src/views/createapp/components/workFlowConfig/SpecialEdge.vue
new file mode 100644
index 0000000000000000000000000000000000000000..8ea9542b1d5f271c107caf3371e1012e2f786b22
--- /dev/null
+++ b/src/views/createapp/components/workFlowConfig/SpecialEdge.vue
@@ -0,0 +1,62 @@
+
+
+
+
+
+
+
+
+
+
+
+ {{ data.hello }}
+
+
+
diff --git a/src/views/createapp/components/workFlowConfig/SpecialNode.vue b/src/views/createapp/components/workFlowConfig/SpecialNode.vue
new file mode 100644
index 0000000000000000000000000000000000000000..213c5daa6e525fbfad8f6d10eccc84c6fb02c3ee
--- /dev/null
+++ b/src/views/createapp/components/workFlowConfig/SpecialNode.vue
@@ -0,0 +1,28 @@
+
+
+
+
+
{{ data.label }}
+
+
{{ x }} {{ y }}
+
+
+
+
diff --git a/src/views/createapp/components/workFlowConfig/editFlowName.vue b/src/views/createapp/components/workFlowConfig/editFlowName.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a5ea3d3a858f58bfc12794d83badf8f677d90d70
--- /dev/null
+++ b/src/views/createapp/components/workFlowConfig/editFlowName.vue
@@ -0,0 +1,147 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/views/createapp/components/workFlowConfig/useDnD.js b/src/views/createapp/components/workFlowConfig/useDnD.js
new file mode 100644
index 0000000000000000000000000000000000000000..eecea56426ec7da0bf145167a44c52b5f3b28ea8
--- /dev/null
+++ b/src/views/createapp/components/workFlowConfig/useDnD.js
@@ -0,0 +1,130 @@
+import { useVueFlow } from '@vue-flow/core';
+import { ref, watch } from 'vue';
+import { v4 as uuidv4 } from 'uuid';
+
+/**
+ * @returns {string} - A unique id.
+ */
+function getId() {
+ return uuidv4();
+}
+
+/**
+ * In a real world scenario you'd want to avoid creating refs in a global scope like this as they might not be cleaned up properly.
+ * @type {{draggedType: Ref
, isDragOver: Ref, isDragging: Ref}}
+ */
+const state = {
+ /**
+ * The type of the node being dragged.
+ */
+ draggedType: ref(null),
+ isDragOver: ref(false),
+ isDragging: ref(false),
+ nodeData: ref({}),
+};
+
+export default function useDragAndDrop() {
+ const { draggedType, isDragOver, isDragging, nodeData } = state;
+
+ const {
+ addNodes,
+ screenToFlowCoordinate,
+ onNodesInitialized,
+ updateNode,
+ addEdges,
+ } = useVueFlow();
+
+ watch(isDragging, (dragging) => {
+ document.body.style.userSelect = dragging ? 'none' : '';
+ });
+
+ function onDragStart(event, type, info) {
+ if (event.dataTransfer) {
+ event.dataTransfer.setData('application/vueflow', type);
+ event.dataTransfer.effectAllowed = 'move';
+ }
+ draggedType.value = type === 'choice' ? 'branch' : 'custom';
+ isDragging.value = true;
+ nodeData.value = { ...info };
+
+ document.addEventListener('drop', onDragEnd);
+ }
+
+ /**
+ * Handles the drag over event.
+ *
+ * @param {DragEvent} event
+ */
+ function onDragOver(event) {
+ event.preventDefault();
+
+ if (draggedType.value) {
+ isDragOver.value = true;
+
+ if (event.dataTransfer) {
+ event.dataTransfer.dropEffect = 'move';
+ }
+ }
+ }
+
+ function onDragLeave() {
+ isDragOver.value = false;
+ }
+
+ function onDragEnd() {
+ isDragging.value = false;
+ isDragOver.value = false;
+ draggedType.value = null;
+ document.removeEventListener('drop', onDragEnd);
+ }
+
+ /**
+ * Handles the drop event.
+ *
+ * @param {DragEvent} event
+ */
+ function onDrop(event) {
+ const position = screenToFlowCoordinate({
+ x: event.clientX,
+ y: event.clientY,
+ });
+
+ const nodeId = getId();
+
+ const newNode = {
+ id: nodeId,
+ type: draggedType.value,
+ position,
+ class: 'round-start',
+ data: nodeData.value,
+ };
+
+ /**
+ * Align node position after drop, so it's centered to the mouse
+ *
+ * We can hook into events even in a callback, and we can remove the event listener after it's been called.
+ */
+ const { off } = onNodesInitialized(() => {
+ const vueFlowContainer = document.querySelector('.my-diagram-class');
+ updateNode(nodeId, (node) => ({
+ position: {
+ x: node.position.x - node.dimensions.width / 2,
+ y: node.position.y - node.dimensions.height / 2,
+ },
+ }));
+
+ off();
+ });
+ addNodes(newNode);
+ }
+
+ return {
+ draggedType,
+ isDragOver,
+ isDragging,
+ onDragStart,
+ onDragLeave,
+ onDragOver,
+ onDrop,
+ };
+}
diff --git a/src/views/createapp/components/workFlowConfig/useLayout.js b/src/views/createapp/components/workFlowConfig/useLayout.js
new file mode 100644
index 0000000000000000000000000000000000000000..cb817bb44bc42bec6382b3e6e72c47271a605fac
--- /dev/null
+++ b/src/views/createapp/components/workFlowConfig/useLayout.js
@@ -0,0 +1,88 @@
+import dagre from '@dagrejs/dagre';
+import { Position, useVueFlow } from '@vue-flow/core';
+import { ref } from 'vue';
+
+/**
+ * Composable to run the layout algorithm on the graph.
+ * It uses the `dagre` library to calculate the layout of the nodes and edges.
+ *
+ * @see https://github.com/dagrejs/dagre/wiki
+ */
+export function useLayout() {
+ const { findNode } = useVueFlow();
+
+ const graph = ref(new dagre.graphlib.Graph());
+
+ const previousDirection = ref('LR');
+
+ function layout(nodes, edges, direction) {
+ const dagreGraph = new dagre.graphlib.Graph();
+
+ graph.value = dagreGraph;
+
+ // 设置默认边标签
+ dagreGraph.setDefaultEdgeLabel(() => ({}));
+
+ const isHorizontal = direction === 'TB';
+
+ // 设置图布局
+ dagreGraph.setGraph({ rankdir: direction });
+
+ previousDirection.value = direction;
+ let maxHeight = 108;
+ for (const node of nodes) {
+ // 查找到节点的信息
+ const graphNode = findNode(node.id);
+ // 获取到所有节点中最高的高度,之后可计算每个节点与最高高度差设置y,使得节点的中心点都在同一水平线上
+ maxHeight =
+ maxHeight > graphNode.dimensions.height
+ ? maxHeight
+ : graphNode.dimensions.height;
+ }
+
+ for (const node of nodes) {
+ // 查找到节点的信息
+ const graphNode = findNode(node.id);
+
+ // 设置节点
+ dagreGraph.setNode(node.id, {
+ width: graphNode.dimensions.width + 100 || 150,
+ height: graphNode.dimensions.height + 100 || 50,
+ });
+ }
+
+ // 设置边
+ for (const edge of edges) {
+ dagreGraph.setEdge(edge.source, edge.target);
+ }
+
+ // 排版
+ dagre.layout(dagreGraph);
+
+ // set nodes with updated positions
+ return nodes.map((node) => {
+ const nodeWithPosition = dagreGraph.node(node.id);
+ let diff = maxHeight - nodeWithPosition.height;
+ let position = {
+ x: nodeWithPosition.x,
+ y: nodeWithPosition.y + diff / 2,
+ };
+ // 需要进行判断--是否为开始结束
+ if (node.id === 'start' || node.id === 'end') {
+ position = {
+ x: nodeWithPosition.x + 112,
+ y: nodeWithPosition.y + diff / 2,
+ };
+ }
+
+ return {
+ ...node,
+ targetPosition: isHorizontal ? Position.Left : Position.Top,
+ sourcePosition: isHorizontal ? Position.Right : Position.Bottom,
+ position: position, // 这里修改即可
+ };
+ });
+ }
+
+ return { graph, layout, previousDirection };
+}
diff --git a/src/views/createapp/components/workFlowConfig/workFlowDialog.vue b/src/views/createapp/components/workFlowConfig/workFlowDialog.vue
new file mode 100644
index 0000000000000000000000000000000000000000..5ba918f0e49d3d7d21c753a82f69885a2a82ab66
--- /dev/null
+++ b/src/views/createapp/components/workFlowConfig/workFlowDialog.vue
@@ -0,0 +1,189 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/views/createapp/components/workFlowConfig/yamlEditDrawer.vue b/src/views/createapp/components/workFlowConfig/yamlEditDrawer.vue
new file mode 100644
index 0000000000000000000000000000000000000000..77c5305e6236558b6788cf9db43824baeda42859
--- /dev/null
+++ b/src/views/createapp/components/workFlowConfig/yamlEditDrawer.vue
@@ -0,0 +1,315 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ item.title }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/views/createapp/components/workFlowDebug.vue b/src/views/createapp/components/workFlowDebug.vue
new file mode 100644
index 0000000000000000000000000000000000000000..b15bb0596262b9c7aaecfc512d94e526314ff7cf
--- /dev/null
+++ b/src/views/createapp/components/workFlowDebug.vue
@@ -0,0 +1,206 @@
+
+
+
+
diff --git a/src/views/createapp/index.vue b/src/views/createapp/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..65aff6ecdfe20c34a9cf9868e249ff9b63662c2c
--- /dev/null
+++ b/src/views/createapp/index.vue
@@ -0,0 +1,269 @@
+
+
+
+
+
diff --git a/src/views/customLoading/index.vue b/src/views/customLoading/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..82c6c8ec588c8e9bbef868bb729936c89ccadf4f
--- /dev/null
+++ b/src/views/customLoading/index.vue
@@ -0,0 +1,30 @@
+
+
+
+
+
+
+
diff --git a/src/views/dialogue/Copilot.vue b/src/views/dialogue/Copilot.vue
index e9d50896b8b3450f129f5377c9ebe9ddeb2bad06..e4e455e32d55e948172dc0b8d654360f1a6fc391 100644
--- a/src/views/dialogue/Copilot.vue
+++ b/src/views/dialogue/Copilot.vue
@@ -1,85 +1,86 @@
-
+
-
+
+ :visible="agreeDialogVisiable"
+ :content="tip"
+ :need-check="false"
+ height="300px"
+ agreement-name="内测声明"
+ @submit="agreeDialogVisiable = false"
+ >
diff --git a/src/views/dialogue/components/AgainstPopover.vue b/src/views/dialogue/components/AgainstPopover.vue
index 7f0903651df8873de16578e55990601188698392..61395efdeff0ee305bef3575c2e8caf39a593200 100644
--- a/src/views/dialogue/components/AgainstPopover.vue
+++ b/src/views/dialogue/components/AgainstPopover.vue
@@ -2,36 +2,38 @@
import { computed, ref } from 'vue';
import { warningMsg } from 'src/components/Message';
import { useChangeThemeStore } from 'src/store';
-import i18n from 'src/i18n'
+import i18n from 'src/i18n';
const themeStore = useChangeThemeStore();
const list = ref<
{
label: string;
- name:string;
+ name: string;
isChecked: boolean;
}[]
>([
{
- label: i18n.global.t('feedback.the_information_is_inappropriate_or_illegal'),
- name:'the_information_is_inappropriate_or_illegal',
+ label: i18n.global.t(
+ 'feedback.the_information_is_inappropriate_or_illegal',
+ ),
+ name: 'the_information_is_inappropriate_or_illegal',
isChecked: false,
},
{
label: i18n.global.t('feedback.the_answer_is_not_helpful'),
- name:'the_answer_is_not_helpful',
+ name: 'the_answer_is_not_helpful',
isChecked: false,
},
{
label: i18n.global.t('feedback.i_found_an_error'),
- name:'i_found_an_error',
+ name: 'i_found_an_error',
isChecked: false,
},
]);
const checkedValue = computed(() =>
list.value.reduce((accVal, currVal) => {
return currVal.isChecked ? `${accVal}${currVal.label};` : accVal;
- }, '')
+ }, ''),
);
// 参考链接
const referLink = ref
('');
@@ -41,7 +43,12 @@ const isErrorInputVisiable = computed(() => list.value[2].isChecked);
const emits = defineEmits<{
(e: 'close'): void;
- (e: 'submit', reason: string, reasionLink?: string, reason_description?: string): void;
+ (
+ e: 'submit',
+ reason: string,
+ reasionLink?: string,
+ reason_description?: string,
+ ): void;
}>();
/** 提交 */
@@ -60,10 +67,14 @@ const handleSubmit = () => {
-
{{$t('feedback.your_feedback_helps_us_improve')}}
+
+ {{ $t('feedback.your_feedback_helps_us_improve') }}
+
-
- {{ $t('feedback.'+item.name) }}
+
+ {{ $t('feedback.' + item.name) }}
+
@@ -82,72 +93,84 @@ const handleSubmit = () => {
/>
- {{$t('history.cancel')}}
-
+
+ {{ $t('history.cancel') }}
+
+
diff --git a/src/views/dialogue/components/DialogueAside.vue b/src/views/dialogue/components/DialogueAside.vue
index ca910a6b65512ca47d207d55464f3c0c00849801..465d5cb00f8844922954be0fbe8af37ca095adf8 100644
--- a/src/views/dialogue/components/DialogueAside.vue
+++ b/src/views/dialogue/components/DialogueAside.vue
@@ -1,4 +1,5 @@