refactor: add view question

Author: ziyujiahao

frontend/src/i18n/en.json

@@ -36,6 +36,8 @@
     "password_reset_successful": "Password reset successful"
   },
   "dashboard": {
+    "add_dashboard_name_tips": "Please Input Dashboard Name",
+    "existing_dashboard": "Existing Dashboard",
     "add_success": "Add Success",
     "no_data": "No Relevant Content Found",
     "new_tab": "New Tab",

frontend/src/i18n/zh-CN.json

@@ -39,6 +39,8 @@
     "or": "或者"
   },
   "dashboard": {
+    "add_dashboard_name_tips": "请输入仪表板名称",
+    "existing_dashboard": "存量仪表板",
     "add_success": "添加成功",
     "no_data": "没找到相关内容",
     "new_tab": "新建Tab",

frontend/src/views/chat/chat-block/ChartBlock.vue

@@ -192,9 +192,25 @@ function showSql() {
 }
 
 function addToDashboard() {
-  const viewInfo = chartRef.value?.getViewInfo()
+  const recordeInfo = {
+    id: '1-1',
+    data: {
+      data: data.value,
+    },
+    chart: {},
+  }
+  // @ts-expect-error eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  const chartBaseInfo = JSON.parse(props.message?.record?.chart)
+  recordeInfo['chart'] = {
+    type: chartBaseInfo.type,
+    title: chartBaseInfo.title,
+    columns: chartBaseInfo.columns,
+    xAxis: chartBaseInfo.axis?.x ? [chartBaseInfo.axis.x] : [],
+    yAxis: chartBaseInfo.axis?.y ? [chartBaseInfo.axis.y] : [],
+    series: chartBaseInfo.axis?.series ? [chartBaseInfo.axis.series] : [],
+  }
   // @ts-expect-error eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  addViewRef.value?.optInit(viewInfo)
+  addViewRef.value?.optInit(recordeInfo)
 }
 
 function copy() {
@@ -264,7 +280,7 @@ function copy() {
             </el-button>
           </el-tooltip>
         </div>
-        <div v-if="false">
+        <div>
           <!--    todo      -->
           <el-tooltip effect="dark" :content="t('chat.add_to_dashboard')" placement="top">
             <el-button class="tool-btn" text @click="addToDashboard">

frontend/src/views/dashboard/common/AddViewDashboard.vue

@@ -68,6 +68,10 @@ const saveResourcePrepare = () => {
     if (result) {
       const component = cloneDeep(findNewComponentFromList('SQView'))
       const newComponentId = guid()
+      // @ts-expect-error eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      state.viewInfo.chart['id'] = newComponentId
+      // @ts-expect-error eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      state.viewInfo['id'] = newComponentId
       if (resourceForm.addType === 'history' && component) {
         findNextComponentIndex({ id: resourceForm.dashboardId }, (result: any) => {
           const {
@@ -84,10 +88,8 @@ const saveResourcePrepare = () => {
             name: dashboardInfo.name,
           }
           component['id'] = newComponentId
-          component['y'] = bottomPosition + 1
+          component['y'] = bottomPosition
           canvasDataResult.push(component)
-          // @ts-expect-error eslint-disable-next-line @typescript-eslint/ban-ts-comment
-          state.viewInfo.chart['id'] = newComponentId
           canvasViewInfoPreview[newComponentId] = state.viewInfo
           const commonParams = {
             componentData: canvasDataResult,
@@ -97,12 +99,22 @@ const saveResourcePrepare = () => {
           saveResource(params, commonParams)
         })
       } else if (resourceForm.addType === 'new' && component) {
-        const params = { opt: 'newLeaf', pid: 'root', name: resourceForm.dashboardName }
+        const params = {
+          opt: 'newLeaf',
+          pid: 'root',
+          name: resourceForm.dashboardName,
+          level: 1,
+          node_type: 'leaf',
+          type: 'dashboard',
+        }
         component['id'] = newComponentId
+        const canvasViewInfo = {}
+        // @ts-expect-error eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        canvasViewInfo[newComponentId] = state.viewInfo
         const commonParams = {
           componentData: [component],
           canvasStyleData: {},
-          canvasViewInfo: { newComponentId: state.viewInfo },
+          canvasViewInfo: canvasViewInfo,
         }
         saveResource(params, commonParams)
       }
@@ -112,7 +124,7 @@ const saveResourcePrepare = () => {
 
 const saveResource = (params: any, commonParams: any) => {
   saveDashboardResourceTarget(params, commonParams, function () {
-    const messageTips = t('common.save_success')
+    const messageTips = t('dashboard.add_success')
     ElMessage({
       type: 'success',
       message: messageTips,
@@ -142,7 +154,7 @@ defineExpose({
   <el-dialog
     v-model="resourceDialogShow"
     class="create-dialog"
-    title="添加到仪表板"
+    :title="t('chat.add_to_dashboard')"
     width="420px"
     :before-close="resetForm"
     append-to-body
@@ -157,33 +169,36 @@ defineExpose({
       :rules="resourceForm.addType === 'new' ? resourceFormRulesNew : resourceFormRulesHistory"
       @submit.prevent
     >
-      <el-form-item label="仪表板名称" required prop="addType">
+      <el-form-item :label="t('dashboard.dashboard_name')" required prop="addType">
         <el-radio-group v-model="resourceForm.addType">
-          <el-radio value="history">存量仪表板</el-radio>
-          <el-radio value="new">新建仪表板</el-radio>
+          <el-radio value="history">{{ t('dashboard.existing_dashboard') }}</el-radio>
+          <el-radio value="new">{{ t('dashboard.new_dashboard') }}</el-radio>
         </el-radio-group>
       </el-form-item>
       <el-form-item
         v-if="resourceForm.addType === 'new'"
-        label="仪表板"
+        :label="t('dashboard.dashboard')"
         required
         prop="dashboardName"
       >
         <el-input
           v-model="resourceForm.dashboardName"
           clearable
-          placeholder="请输入仪表板名称"
+          :placeholder="t('dashboard.add_dashboard_name_tips')"
           @keydown.stop
           @keyup.stop
         />
       </el-form-item>
       <el-form-item
         v-if="resourceForm.addType === 'history'"
-        label="仪表板"
+        :label="t('dashboard.dashboard')"
         required
         prop="dashboardId"
       >
-        <el-select v-model="resourceForm.dashboardId" placeholder="请选择仪表板">
+        <el-select
+          v-model="resourceForm.dashboardId"
+          :placeholder="t('dashboard.select_dashboard')"
+        >
           <el-option
             v-for="item in state.dashboardList"
             :key="item.id"