From e33217571dfb72a2a4566f1388667152498c5f2e Mon Sep 17 00:00:00 2001 From: dataeaseShu Date: Tue, 9 Jul 2024 16:39:52 +0800 Subject: [PATCH] =?UTF-8?q?feat(=E7=B3=BB=E7=BB=9F=E8=AE=BE=E7=BD=AE):=20D?= =?UTF-8?q?ataEase=20Copilot=E9=9C=80=E6=B1=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- core/core-frontend/src/api/dataset.ts | 8 +- .../src/assets/svg/chart-bar.svg | 3 + .../src/assets/svg/chart-download.svg | 3 + .../src/assets/svg/chart-table.svg | 3 + .../src/assets/svg/icon_chart-line.svg | 4 + .../src/assets/svg/icon_loading_outlined.svg | 3 + .../src/views/copilot/DialogueChart.vue | 267 +++++++++++++++++- .../core-frontend/src/views/copilot/index.vue | 219 +++++++++----- 8 files changed, 426 insertions(+), 84 deletions(-) create mode 100644 core/core-frontend/src/assets/svg/chart-bar.svg create mode 100644 core/core-frontend/src/assets/svg/chart-download.svg create mode 100644 core/core-frontend/src/assets/svg/chart-table.svg create mode 100644 core/core-frontend/src/assets/svg/icon_chart-line.svg create mode 100644 core/core-frontend/src/assets/svg/icon_loading_outlined.svg diff --git a/core/core-frontend/src/api/dataset.ts b/core/core-frontend/src/api/dataset.ts index 7d3c6daf5b..796cf88402 100644 --- a/core/core-frontend/src/api/dataset.ts +++ b/core/core-frontend/src/api/dataset.ts @@ -310,14 +310,14 @@ export const copilotChat = async (data): Promise => { }) } -export const getListCopilot = async (data): Promise => { - return request.post({ url: '/copilot/getList/' + data }).then(res => { +export const getListCopilot = async (): Promise => { + return request.post({ url: '/copilot/getList' }).then(res => { return res?.data }) } -export const clearAllCopilot = async (data): Promise => { - return request.post({ url: '/copilot/clearAll/' + data }).then(res => { +export const clearAllCopilot = async (): Promise => { + return request.post({ url: '/copilot/clearAll' }).then(res => { return res?.data }) } diff --git a/core/core-frontend/src/assets/svg/chart-bar.svg b/core/core-frontend/src/assets/svg/chart-bar.svg new file mode 100644 index 0000000000..97f62c8b42 --- /dev/null +++ b/core/core-frontend/src/assets/svg/chart-bar.svg @@ -0,0 +1,3 @@ + + + diff --git a/core/core-frontend/src/assets/svg/chart-download.svg b/core/core-frontend/src/assets/svg/chart-download.svg new file mode 100644 index 0000000000..75e7cb8738 --- /dev/null +++ b/core/core-frontend/src/assets/svg/chart-download.svg @@ -0,0 +1,3 @@ + + + diff --git a/core/core-frontend/src/assets/svg/chart-table.svg b/core/core-frontend/src/assets/svg/chart-table.svg new file mode 100644 index 0000000000..e9a718b1f3 --- /dev/null +++ b/core/core-frontend/src/assets/svg/chart-table.svg @@ -0,0 +1,3 @@ + + + diff --git a/core/core-frontend/src/assets/svg/icon_chart-line.svg b/core/core-frontend/src/assets/svg/icon_chart-line.svg new file mode 100644 index 0000000000..9a42cdd171 --- /dev/null +++ b/core/core-frontend/src/assets/svg/icon_chart-line.svg @@ -0,0 +1,4 @@ + + + + diff --git a/core/core-frontend/src/assets/svg/icon_loading_outlined.svg b/core/core-frontend/src/assets/svg/icon_loading_outlined.svg new file mode 100644 index 0000000000..1ef953a023 --- /dev/null +++ b/core/core-frontend/src/assets/svg/icon_loading_outlined.svg @@ -0,0 +1,3 @@ + + + diff --git a/core/core-frontend/src/views/copilot/DialogueChart.vue b/core/core-frontend/src/views/copilot/DialogueChart.vue index e133c863f4..6a7efe8620 100644 --- a/core/core-frontend/src/views/copilot/DialogueChart.vue +++ b/core/core-frontend/src/views/copilot/DialogueChart.vue @@ -1,11 +1,15 @@ @@ -96,21 +147,25 @@ const queryAnswer = () => {
-
+
-
- - - - - -
+ +
+
+ + + + + + + +
@@ -138,6 +193,7 @@ const queryAnswer = () => { @change="handleDatasetChange" :props="dsSelectProps" style="width: 100%" + ref="treeSelectRef" placement="bottom" :render-after-expand="false" filterable @@ -232,78 +288,93 @@ const queryAnswer = () => { .dialogue { flex: 1; padding: 0 160px; + position: relative; .copilot-dialogue { - height: calc(100vh - 113px); padding-top: 24px; position: relative; + overflow-y: auto; + padding-bottom: 25px; + } + .question-input { + min-height: 47px; + width: calc(100% - 400px); + margin-left: 20px; + display: flex; + align-items: center; + justify-content: center; + position: absolute; + border: 1px solid #fff; + bottom: 25px; + border-radius: 8px; + left: 180px; + box-sizing: border-box; + background: #fff; + box-shadow: 0px 6px 24px 0px #1f232914; + &:hover { + border: 1px solid var(--ed-color-primary); + } - .question-input { - width: calc(100% - 40px); - min-height: 47px; - margin-left: 20px; - display: flex; - align-items: center; - justify-content: center; - position: absolute; - border: 1px solid #fff; - bottom: 24px; - border-radius: 8px; - left: 0; - box-sizing: border-box; - background: #fff; - box-shadow: 0px 6px 24px 0px #1f232914; - &:hover { - border: 1px solid var(--ed-color-primary); - } + &:has(.ed-textarea__inner:focus) { + border: 1px solid var(--ed-color-primary); + } - &:has(.ed-textarea__inner:focus) { - border: 1px solid var(--ed-color-primary); - } + :deep(.ed-textarea__inner) { + border-radius: 8px !important; + box-shadow: none; + resize: none; + padding: 12px 16px; + max-height: 200px; + } - :deep(.ed-textarea__inner) { - border-radius: 8px !important; - box-shadow: none; - resize: none; - padding: 12px 16px; - max-height: 200px; - } + &.over-height :deep(.ed-textarea__inner) { + padding-bottom: 40px; + } - &.over-height :deep(.ed-textarea__inner) { - padding-bottom: 40px; - } - - .copilot-icon { - position: absolute !important; - bottom: 12px; - right: 16px; - font-size: 24px; - cursor: not-allowed; - position: relative; - &.active { - cursor: pointer; + .copilot-icon { + position: absolute !important; + bottom: 12px; + right: 16px; + font-size: 24px; + cursor: not-allowed; + position: relative; + &.active { + cursor: pointer; + &::after { + content: ''; + position: absolute; + height: 32px; + width: 32px; + border-radius: 8px; + display: none; + background: #3370ff1a; + } + &:hover { &::after { - content: ''; - position: absolute; - height: 32px; - width: 32px; - border-radius: 8px; - display: none; - background: #3370ff1a; - } - &:hover { - &::after { - display: block; - } + display: block; } } } } + + @keyframes circular { + 0% { + transform: rotate(0); + } + + 100% { + transform: rotate(360deg); + } + } + + .circular-input_icon { + animation: circular 1s infinite; + } } } .dataset-select { width: 280px; - height: 100%; + height: calc(100vh - 115px); background: #fff; border-left: 1px solid #1f232926; position: relative;