diff --git a/frontend/src/views/dashboard/common/AddViewDashboard.vue b/frontend/src/views/dashboard/common/AddViewDashboard.vue
new file mode 100644
index 0000000..2070de5
--- /dev/null
+++ b/frontend/src/views/dashboard/common/AddViewDashboard.vue
@@ -0,0 +1,302 @@
+<script lang="ts" setup>
+import { reactive, ref, h } from 'vue'
+import { ElButton, ElMessage } from 'element-plus-secondary'
+import {
+  findNextComponentIndex,
+  saveDashboardResourceTarget,
+} from '@/views/dashboard/utils/canvasUtils.ts'
+import { useI18n } from 'vue-i18n'
+import { dashboardApi } from '@/api/dashboard.ts'
+import type { SQTreeNode } from '@/views/dashboard/utils/treeNode.ts'
+import cloneDeep from 'lodash/cloneDeep'
+import { findNewComponentFromList } from '@/views/dashboard/components/component-list.ts'
+import { guid } from '@/utils/canvas.ts'
+
+const { t } = useI18n()
+const resource = ref(null)
+
+const optInit = (viewInfo: any) => {
+  initDashboardList()
+  resourceDialogShow.value = true
+  state.viewInfo = viewInfo
+}
+const state = reactive({
+  dashboardList: [] as SQTreeNode[],
+  viewInfo: null,
+})
+
+const resourceDialogShow = ref(false)
+const loading = ref(false)
+const resourceForm = reactive({
+  addType: 'history',
+  dashboardId: '',
+  dashboardName: '',
+})
+
+const resourceFormRulesNew = ref({
+  dashboardName: [
+    {
+      required: true,
+      min: 1,
+      max: 64,
+      message: t('dashboard.length_limit64'),
+      trigger: 'change',
+    },
+  ],
+})
+
+const resourceFormRulesHistory = ref({
+  dashboardId: [
+    {
+      required: true,
+      min: 1,
+      max: 64,
+      message: '请选择仪表板',
+      trigger: 'change',
+    },
+  ],
+})
+
+const resetForm = () => {
+  resourceForm.dashboardId = ''
+  resourceForm.dashboardName = ''
+  resourceDialogShow.value = false
+}
+
+const saveResourcePrepare = () => {
+  // @ts-expect-error eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  resource.value?.validate((result) => {
+    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 {
+            bottomPosition,
+            dashboardInfo,
+            canvasDataResult,
+            canvasStyleResult,
+            canvasViewInfoPreview,
+          } = result
+          const params = {
+            opt: 'updateLeaf',
+            pid: 'root',
+            id: resourceForm.dashboardId,
+            name: dashboardInfo.name,
+          }
+          component['id'] = newComponentId
+          component['y'] = bottomPosition
+          canvasDataResult.push(component)
+          canvasViewInfoPreview[newComponentId] = state.viewInfo
+          const commonParams = {
+            componentData: canvasDataResult,
+            canvasStyleData: canvasStyleResult,
+            canvasViewInfo: canvasViewInfoPreview,
+          }
+          saveResource(params, commonParams)
+        })
+      } else if (resourceForm.addType === 'new' && component) {
+        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: canvasViewInfo,
+        }
+        saveResource(params, commonParams)
+      }
+    }
+  })
+}
+
+const saveResource = (params: any, commonParams: any) => {
+  saveDashboardResourceTarget(params, commonParams, (res: any) => {
+    const messageTips = t('dashboard.add_success')
+    openMessageLoading(messageTips, 'success', res?.id, callbackExportSuc)
+    resetForm()
+  })
+}
+
+const callbackExportSuc = (curOptDashboardIdValue: any) => {
+  // do open dashboard
+  const url = `#/canvas?resourceId=${curOptDashboardIdValue}`
+  window.open(url, '_self')
+}
+
+// eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
+const openMessageLoading = (text: string, type = 'success', dvId: any, cb: Function) => {
+  // success error loading
+  const customClass = `sq-message-${type || 'success'} sq-message-export`
+  ElMessage({
+    // @ts-expect-error eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    message: h('p', null, [
+      h(
+        'span',
+        {
+          title: t(text),
+          class: 'ellipsis m50-export',
+        },
+        t(text)
+      ),
+      h(
+        ElButton,
+        {
+          text: true,
+          size: 'small',
+          class: 'btn-text',
+          onClick: () => {
+            cb(dvId)
+          },
+        },
+        t('dashboard.open_dashboard')
+      ),
+    ]),
+    type,
+    showClose: true,
+    duration: 2000,
+    customClass,
+  })
+}
+
+const initDashboardList = () => {
+  state.dashboardList = []
+  const params = {}
+  dashboardApi.list_resource(params).then((res: SQTreeNode[]) => {
+    state.dashboardList = res || []
+  })
+}
+
+defineExpose({
+  optInit,
+})
+</script>
+
+<template>
+  <el-dialog
+    v-model="resourceDialogShow"
+    class="create-dialog"
+    :title="t('chat.add_to_dashboard')"
+    width="420px"
+    :before-close="resetForm"
+    append-to-body
+    @submit.prevent
+  >
+    <el-form
+      ref="resource"
+      v-loading="loading"
+      label-position="top"
+      require-asterisk-position="right"
+      :model="resourceForm"
+      :rules="resourceForm.addType === 'new' ? resourceFormRulesNew : resourceFormRulesHistory"
+      @submit.prevent
+    >
+      <el-form-item :label="t('dashboard.dashboard_name')" required prop="addType">
+        <el-radio-group v-model="resourceForm.addType">
+          <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="t('dashboard.dashboard')"
+        required
+        prop="dashboardName"
+      >
+        <el-input
+          v-model="resourceForm.dashboardName"
+          clearable
+          :placeholder="t('dashboard.add_dashboard_name_tips')"
+          @keydown.stop
+          @keyup.stop
+        />
+      </el-form-item>
+      <el-form-item
+        v-if="resourceForm.addType === 'history'"
+        :label="t('dashboard.dashboard')"
+        required
+        prop="dashboardId"
+      >
+        <el-select
+          v-model="resourceForm.dashboardId"
+          filterable
+          :placeholder="t('dashboard.select_dashboard')"
+        >
+          <el-option
+            v-for="item in state.dashboardList"
+            :key="item.id"
+            :label="item.name"
+            :value="item.id"
+          />
+        </el-select>
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button secondary @click="resetForm()">{{ t('common.cancel') }}</el-button>
+      <el-button type="primary" @click="saveResourcePrepare()">{{ t('common.confirm') }}</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="less" scoped>
+.tree-content {
+  width: 552px;
+  height: 380px;
+  border: 1px solid #dee0e3;
+  border-radius: 4px;
+  padding: 8px;
+  overflow-y: auto;
+
+  .empty-search {
+    width: 100%;
+    margin-top: 57px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    img {
+      width: 100px;
+      height: 100px;
+      margin-bottom: 8px;
+    }
+
+    span {
+      font-family: var(--de-custom_font, 'PingFang');
+      font-size: 14px;
+      font-weight: 400;
+      line-height: 22px;
+      color: #646a73;
+    }
+  }
+}
+
+.custom-tree-node {
+  display: flex;
+  align-items: center;
+
+  span {
+    margin-left: 8.75px;
+    width: 120px;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+}
+
+.custom-tree-folder {
+  color: rgb(255, 198, 10);
+}
+</style>