Merge pull request #13926 from dataease/pr@dev-v2_st

feat(嵌入式): copilot 支持嵌入

core/core-frontend/src/pages/panel/App.vue

@@ -23,6 +23,8 @@ const DashboardPanel = defineAsyncComponent(
   () => import('@/views/dashboard/DashboardPreviewShow.vue')
 )
 
+const Copilot = defineAsyncComponent(() => import('@/views/copilot/index.vue'))
+
 const Preview = defineAsyncComponent(() => import('@/views/data-visualization/PreviewCanvas.vue'))
 const DashboardEmpty = defineAsyncComponent(() => import('@/views/mobile/panel/DashboardEmpty.vue'))
 
@@ -45,7 +47,8 @@ const componentMap = {
   ScreenPanel,
   DashboardPanel,
   DatasetEditor,
-  DashboardEmpty
+  DashboardEmpty,
+  Copilot
 }
 
 const isDataFilling = ref(false)

core/core-frontend/src/views/chart/ChartView.vue

@@ -28,6 +28,7 @@ const ScreenPanel = defineAsyncComponent(() => import('@/views/data-visualizatio
 const DashboardPanel = defineAsyncComponent(
   () => import('@/views/dashboard/DashboardPreviewShow.vue')
 )
+const Copilot = defineAsyncComponent(() => import('@/views/copilot/index.vue'))
 
 const AsyncXpackComponent = defineAsyncComponent(() => import('@/components/plugin/src/index.vue'))
 
@@ -39,7 +40,8 @@ const componentMap = {
   Dataset,
   Datasource,
   ScreenPanel,
-  DashboardPanel
+  DashboardPanel,
+  Copilot
 }
 const iframeStyle = ref(null)
 const setStyle = debounce(() => {

core/core-frontend/src/views/copilot/index.vue

@@ -5,6 +5,7 @@ import copilot from '@/assets/svg/copilot.svg'
 import icon_loading_outlined from '@/assets/svg/icon_loading_outlined.svg'
 import icon_right_outlined from '@/assets/svg/icon_right_outlined.svg'
 import icon_left_outlined from '@/assets/svg/icon_left_outlined.svg'
+import { useEmbedded } from '@/store/modules/embedded'
 import dvFolder from '@/assets/svg/dv-folder.svg'
 import icon_dataset from '@/assets/svg/icon_dataset.svg'
 import icon_expandRight_filled from '@/assets/svg/icon_expand-right_filled.svg'
@@ -24,6 +25,8 @@ import { type Tree } from '@/views/visualized/data/dataset/form/CreatDsGroup.vue
 import { cloneDeep } from 'lodash-es'
 import { iconFieldMap } from '@/components/icon-group/field-list'
 import { useI18n } from '@/hooks/web/useI18n'
+
+const embeddedStore = useEmbedded()
 const { t } = useI18n()
 const quota = shallowRef([])
 const dimensions = shallowRef([])
@@ -91,6 +94,12 @@ let oldId = ''
 let currentId = ''
 let oldName = ''
 
+const copilotDialogueComputed = computed(() => {
+  if (embeddedStore.baseUrl) {
+    return { height: `100%` }
+  }
+  return { height: `calc(100vh - ${height + 152}px)` }
+})
 const dfsName = arr => {
   return arr.filter(ele => {
     if (ele.id === oldId) {
@@ -215,7 +224,7 @@ const queryAnswer = (event?: KeyboardEvent) => {
     </div>
     <div class="copilot-service">
       <div class="dialogue">
-        <div class="copilot-dialogue" :style="{ height: `calc(100vh - ${height + 152}px)` }">
+        <div class="copilot-dialogue" :style="copilotDialogueComputed">
           <DialogueChart key="isWelcome" isWelcome></DialogueChart>
           <DialogueChart :copilotInfo="ele" v-for="ele in historyArr" :key="ele.id"></DialogueChart>
           <DialogueChart v-if="copilotChatLoading" key="isAnswer" isAnswer></DialogueChart>
@@ -252,7 +261,6 @@ const queryAnswer = (event?: KeyboardEvent) => {
             </el-icon>
           </p>
         </el-tooltip>
-
         <el-tooltip effect="dark" :content="t('relation.expand')" placement="left">
           <p v-show="showLeft" class="left-outlined" @click="handleShowLeft(false)">
             <el-icon>
@@ -260,92 +268,95 @@ const queryAnswer = (event?: KeyboardEvent) => {
             </el-icon>
           </p>
         </el-tooltip>
-        <div class="title-dataset_select">{{ t('copilot.choose_dataset') }}</div>
-        <div style="margin: 0 16px" class="tree-select">
-          <el-tree-select
-            v-model="datasetId"
-            :data="computedTree"
-            :placeholder="t('copilot.pls_choose_dataset')"
-            @change="handleDatasetChange"
-            :props="dsSelectProps"
-            style="width: 100%"
-            ref="treeSelectRef"
-            placement="bottom"
-            :render-after-expand="false"
-            filterable
-            popper-class="dataset-tree"
-          >
-            <template #default="{ node, data }">
-              <div class="content">
-                <el-icon size="18px" v-if="!data.leaf">
-                  <Icon name="dv-folder"><dvFolder class="svg-icon" /></Icon>
-                </el-icon>
-                <el-icon size="18px" v-if="data.leaf">
-                  <Icon name="icon_dataset"><icon_dataset class="svg-icon" /></Icon>
-                </el-icon>
-                <span class="label ellipsis" style="margin-left: 8px" :title="node.label">{{
-                  node.label
-                }}</span>
-              </div>
-            </template>
-          </el-tree-select>
-        </div>
-        <div class="preview-field">
-          <div :class="['field-d', { open: expandedD }]">
-            <div :class="['title', { expanded: expandedD }]" @click="expandedD = !expandedD">
-              <ElIcon class="expand">
-                <Icon name="icon_expand-right_filled"
-                  ><icon_expandRight_filled class="svg-icon"
-                /></Icon>
-              </ElIcon>
-              &nbsp;{{ $t('chart.dimension') }}
-            </div>
-            <el-tree v-if="expandedD" :data="dimensions" :props="defaultProps">
-              <template #default="{ data }">
-                <span class="custom-tree-node father">
-                  <el-icon>
-                    <Icon
-                      ><component
-                        class="svg-icon"
-                        :class="`field-icon-${
-                          fieldType[[2, 3].includes(data.deExtractType) ? 2 : 0]
-                        }`"
-                        :is="iconFieldMap[fieldType[data.deExtractType]]"
-                      ></component
-                    ></Icon>
+
+        <div style="width: 100%; height: calc(100% - 16px)" v-show="!showLeft">
+          <div class="title-dataset_select">{{ t('copilot.choose_dataset') }}</div>
+          <div style="margin: 0 16px" class="tree-select">
+            <el-tree-select
+              v-model="datasetId"
+              :data="computedTree"
+              :placeholder="t('copilot.pls_choose_dataset')"
+              @change="handleDatasetChange"
+              :props="dsSelectProps"
+              style="width: 100%"
+              ref="treeSelectRef"
+              placement="bottom"
+              :render-after-expand="false"
+              filterable
+              popper-class="dataset-tree"
+            >
+              <template #default="{ node, data }">
+                <div class="content">
+                  <el-icon size="18px" v-if="!data.leaf">
+                    <Icon name="dv-folder"><dvFolder class="svg-icon" /></Icon>
                   </el-icon>
-                  <span :title="data.name" class="label-tooltip">{{ data.name }}</span>
-                </span>
+                  <el-icon size="18px" v-if="data.leaf">
+                    <Icon name="icon_dataset"><icon_dataset class="svg-icon" /></Icon>
+                  </el-icon>
+                  <span class="label ellipsis" style="margin-left: 8px" :title="node.label">{{
+                    node.label
+                  }}</span>
+                </div>
               </template>
-            </el-tree>
+            </el-tree-select>
           </div>
-          <div :class="['field-q', { open: expandedQ }]">
-            <div :class="['title', { expanded: expandedQ }]" @click="expandedQ = !expandedQ">
-              <ElIcon class="expand">
-                <Icon name="icon_expand-right_filled"
-                  ><icon_expandRight_filled class="svg-icon"
-                /></Icon>
-              </ElIcon>
-              &nbsp;{{ $t('chart.quota') }}
+          <div class="preview-field">
+            <div :class="['field-d', { open: expandedD }]">
+              <div :class="['title', { expanded: expandedD }]" @click="expandedD = !expandedD">
+                <ElIcon class="expand">
+                  <Icon name="icon_expand-right_filled"
+                    ><icon_expandRight_filled class="svg-icon"
+                  /></Icon>
+                </ElIcon>
+                &nbsp;{{ $t('chart.dimension') }}
+              </div>
+              <el-tree v-if="expandedD" :data="dimensions" :props="defaultProps">
+                <template #default="{ data }">
+                  <span class="custom-tree-node father">
+                    <el-icon>
+                      <Icon
+                        ><component
+                          class="svg-icon"
+                          :class="`field-icon-${
+                            fieldType[[2, 3].includes(data.deExtractType) ? 2 : 0]
+                          }`"
+                          :is="iconFieldMap[fieldType[data.deExtractType]]"
+                        ></component
+                      ></Icon>
+                    </el-icon>
+                    <span :title="data.name" class="label-tooltip">{{ data.name }}</span>
+                  </span>
+                </template>
+              </el-tree>
+            </div>
+            <div :class="['field-q', { open: expandedQ }]">
+              <div :class="['title', { expanded: expandedQ }]" @click="expandedQ = !expandedQ">
+                <ElIcon class="expand">
+                  <Icon name="icon_expand-right_filled"
+                    ><icon_expandRight_filled class="svg-icon"
+                  /></Icon>
+                </ElIcon>
+                &nbsp;{{ $t('chart.quota') }}
+              </div>
+              <el-tree v-if="expandedQ" :data="quota" :props="defaultProps">
+                <template #default="{ data }">
+                  <span class="custom-tree-node father">
+                    <el-icon>
+                      <Icon
+                        ><component
+                          class="svg-icon"
+                          :class="`field-icon-${
+                            fieldType[[2, 3].includes(data.deExtractType) ? 2 : 0]
+                          }`"
+                          :is="iconFieldMap[fieldType[data.deExtractType]]"
+                        ></component
+                      ></Icon>
+                    </el-icon>
+                    <span :title="data.name" class="label-tooltip">{{ data.name }}</span>
+                  </span>
+                </template>
+              </el-tree>
             </div>
-            <el-tree v-if="expandedQ" :data="quota" :props="defaultProps">
-              <template #default="{ data }">
-                <span class="custom-tree-node father">
-                  <el-icon>
-                    <Icon
-                      ><component
-                        class="svg-icon"
-                        :class="`field-icon-${
-                          fieldType[[2, 3].includes(data.deExtractType) ? 2 : 0]
-                        }`"
-                        :is="iconFieldMap[fieldType[data.deExtractType]]"
-                      ></component
-                    ></Icon>
-                  </el-icon>
-                  <span :title="data.name" class="label-tooltip">{{ data.name }}</span>
-                </span>
-              </template>
-            </el-tree>
           </div>
         </div>
       </div>
@@ -461,7 +472,7 @@ const queryAnswer = (event?: KeyboardEvent) => {
 
     .dataset-select {
       width: 280px;
-      height: calc(100vh - 115px);
+      height: 100%;
       background: #fff;
       border-left: 1px solid #1f232926;
       position: relative;
@@ -519,11 +530,12 @@ const queryAnswer = (event?: KeyboardEvent) => {
 
       .title-dataset_select {
         width: 100%;
-        margin: 16px 16px 12px 16px;
+        margin: 16px 16px 12px 0;
         font-family: var(--de-custom_font, 'PingFang');
         font-size: 14px;
         font-weight: 500;
         line-height: 22px;
+        padding-left: 16px;
       }
       .preview-field {
         padding: 0 8px;