diff --git a/frontend/src/views/dashboard/components/sq-view/index.vue b/frontend/src/views/dashboard/components/sq-view/index.vue
new file mode 100644
index 0000000..51f86e6
--- /dev/null
+++ b/frontend/src/views/dashboard/components/sq-view/index.vue
@@ -0,0 +1,385 @@
+<script setup lang="ts">
+import ChartComponent from '@/views/chat/component/ChartComponent.vue'
+import icon_window_mini_outlined from '@/assets/svg/icon_window-mini_outlined.svg'
+import SqViewDisplay from '@/views/dashboard/components/sq-view/index.vue'
+const props = defineProps({
+  viewInfo: {
+    type: Object,
+    required: true,
+  },
+  outerId: {
+    type: String,
+    required: false,
+    default: null,
+  },
+  showPosition: {
+    type: String,
+    required: false,
+    default: 'default',
+  },
+})
+
+import { computed, nextTick, onMounted, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import ChartPopover from '@/views/chat/chat-block/ChartPopover.vue'
+import ICON_TABLE from '@/assets/svg/chart/icon_form_outlined.svg'
+import ICON_COLUMN from '@/assets/svg/chart/icon_dashboard_outlined.svg'
+import ICON_BAR from '@/assets/svg/chart/icon_bar_outlined.svg'
+import ICON_LINE from '@/assets/svg/chart/icon_chart-line.svg'
+import ICON_PIE from '@/assets/svg/chart/icon_pie_outlined.svg'
+import type { ChartTypes } from '@/views/chat/component/BaseChart.ts'
+const { t } = useI18n()
+const chartRef = ref(null)
+const currentChartType = ref<ChartTypes | undefined>(undefined)
+
+const renderChart = () => {
+  //@ts-expect-error eslint-disable-next-line @typescript-eslint/no-unused-expressions
+  chartRef.value?.destroyChart()
+  //@ts-expect-error eslint-disable-next-line @typescript-eslint/no-unused-expressions
+  chartRef.value?.renderChart()
+}
+
+const enlargeDialogVisible = ref(false)
+
+const enlargeView = () => {
+  enlargeDialogVisible.value = true
+}
+
+const chartTypeList = computed(() => {
+  const _list = []
+  if (props.viewInfo.chart) {
+    switch (props.viewInfo.chart['sourceType']) {
+      case 'table':
+        break
+      case 'column':
+      case 'bar':
+      case 'line':
+        _list.push({
+          value: 'column',
+          name: t('chat.chart_type.column'),
+          icon: ICON_COLUMN,
+        })
+        _list.push({
+          value: 'bar',
+          name: t('chat.chart_type.bar'),
+          icon: ICON_BAR,
+        })
+        _list.push({
+          value: 'line',
+          name: t('chat.chart_type.line'),
+          icon: ICON_LINE,
+        })
+        break
+      case 'pie':
+        _list.push({
+          value: 'pie',
+          name: t('chat.chart_type.pie'),
+          icon: ICON_PIE,
+        })
+    }
+  }
+
+  return _list
+})
+
+function changeTable() {
+  onTypeChange('table')
+}
+
+const chartType = computed<ChartTypes>({
+  get() {
+    if (currentChartType.value) {
+      return currentChartType.value
+    }
+    return props.viewInfo.chart['sourceType'] ?? 'table'
+  },
+  set(v) {
+    currentChartType.value = v
+  },
+})
+
+function onTypeChange(val: any) {
+  chartType.value = val
+  // eslint-disable-next-line vue/no-mutating-props
+  props.viewInfo.chart.type = val
+  nextTick(() => {
+    //@ts-expect-error eslint-disable-next-line @typescript-eslint/no-unused-expressions
+    chartRef.value?.destroyChart()
+    //@ts-expect-error eslint-disable-next-line @typescript-eslint/no-unused-expressions
+    chartRef.value?.renderChart()
+  })
+}
+
+onMounted(() => {
+  // eslint-disable-next-line vue/no-mutating-props
+  props.viewInfo.chart['sourceType'] =
+    props.viewInfo.chart['sourceType'] ?? props.viewInfo.chart.type
+})
+
+defineExpose({
+  renderChart,
+  enlargeView,
+})
+</script>
+
+<template>
+  <div class="chart-base-container">
+    <div class="header-bar">
+      <div class="title">
+        {{ viewInfo.chart.title }}
+      </div>
+      <div v-if="showPosition === 'multiplexing'" class="buttons-bar">
+        <div class="chart-select-container">
+          <el-tooltip effect="dark" :content="t('chat.type')" placement="top">
+            <ChartPopover
+              v-if="chartTypeList.length > 0"
+              :chart-type-list="chartTypeList"
+              :chart-type="chartType"
+              :title="t('chat.type')"
+              @type-change="onTypeChange"
+            ></ChartPopover>
+          </el-tooltip>
+          <el-tooltip effect="dark" :content="t('chat.chart_type.table')" placement="top">
+            <el-button
+              class="tool-btn"
+              :class="{ 'chart-active': currentChartType === 'table' }"
+              text
+              @click="changeTable"
+            >
+              <el-icon size="16">
+                <ICON_TABLE />
+              </el-icon>
+            </el-button>
+          </el-tooltip>
+        </div>
+        <div class="divider" />
+      </div>
+    </div>
+    <div class="chart-show-area">
+      <ChartComponent
+        v-if="viewInfo.id"
+        :id="outerId || viewInfo.id"
+        ref="chartRef"
+        :type="chartType"
+        :columns="viewInfo.chart.columns"
+        :x="viewInfo.chart?.xAxis"
+        :y="viewInfo.chart?.yAxis"
+        :series="viewInfo.chart?.series"
+        :data="viewInfo.data?.data"
+      />
+    </div>
+    <el-dialog
+      v-if="enlargeDialogVisible"
+      v-model="enlargeDialogVisible"
+      fullscreen
+      :show-close="false"
+      class="chart-fullscreen-dialog-view"
+      header-class="chart-fullscreen-dialog-header-view"
+      body-class="chart-fullscreen-dialog-body-view"
+    >
+      <div style="position: absolute; right: 15px; top: 15px; cursor: pointer">
+        <el-tooltip effect="dark" :content="t('dashboard.exit_preview')" placement="top">
+          <el-button
+            class="tool-btn"
+            style="width: 26px"
+            text
+            @click="() => (enlargeDialogVisible = false)"
+          >
+            <el-icon size="16">
+              <icon_window_mini_outlined />
+            </el-icon>
+          </el-button>
+        </el-tooltip>
+      </div>
+      <SqViewDisplay :view-info="viewInfo" :outer-id="'enlarge-' + viewInfo.id" />
+    </el-dialog>
+  </div>
+</template>
+
+<style lang="less">
+.chart-fullscreen-dialog-view {
+  padding: 0;
+}
+.chart-fullscreen-dialog-header-view {
+  display: none;
+}
+.chart-fullscreen-dialog-body-view {
+  padding: 0;
+  height: 100%;
+}
+</style>
+
+<style scoped lang="less">
+.chart-base-container {
+  width: 100%;
+  height: 100%;
+  background: #fff;
+  padding: 12px !important;
+  border-radius: 12px;
+  div::-webkit-scrollbar {
+    width: 0 !important;
+    height: 0 !important;
+  }
+  .header-bar {
+    height: 32px;
+    display: flex;
+    margin-bottom: 16px;
+
+    align-items: center;
+    flex-direction: row;
+
+    .tool-btn {
+      width: 24px;
+      height: 24px;
+
+      font-size: 16px;
+      font-weight: 400;
+      line-height: 24px;
+      border-radius: 6px;
+      color: rgba(100, 106, 115, 1);
+
+      .tool-btn-inner {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+      }
+
+      &:hover {
+        background: rgba(31, 35, 41, 0.1);
+      }
+      &:active {
+        background: rgba(31, 35, 41, 0.1);
+      }
+    }
+
+    .chart-active {
+      background: var(--ed-color-primary-1a, rgba(28, 186, 144, 0.1));
+      color: var(--ed-color-primary, rgba(28, 186, 144, 1));
+      border-radius: 6px;
+
+      :deep(.ed-select__wrapper) {
+        background: transparent;
+      }
+      :deep(.ed-select__input) {
+        color: var(--ed-color-primary, rgba(28, 186, 144, 1));
+      }
+      :deep(.ed-select__placeholder) {
+        color: var(--ed-color-primary, rgba(28, 186, 144, 1));
+      }
+      :deep(.ed-select__caret) {
+        color: var(--ed-color-primary, rgba(28, 186, 144, 1));
+      }
+    }
+
+    .title {
+      flex: 1;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+
+      color: rgba(31, 35, 41, 1);
+      font-weight: 500;
+      font-size: 16px;
+      line-height: 24px;
+    }
+
+    .buttons-bar {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      gap: 16px;
+      margin-right: 36px;
+      .divider {
+        width: 1px;
+        height: 16px;
+        border-left: 1px solid rgba(31, 35, 41, 0.15);
+      }
+    }
+
+    .chart-select-container {
+      padding: 3px;
+      display: flex;
+      flex-direction: row;
+      gap: 4px;
+      border-radius: 6px;
+
+      border: 1px solid rgba(217, 220, 223, 1);
+
+      .chart-select {
+        min-width: 40px;
+        width: 40px;
+        height: 24px;
+
+        :deep(.ed-select__wrapper) {
+          padding: 4px;
+          min-height: 24px;
+          box-shadow: unset;
+          border-radius: 6px;
+
+          &:hover {
+            background: rgba(31, 35, 41, 0.1);
+          }
+          &:active {
+            background: rgba(31, 35, 41, 0.1);
+          }
+        }
+        :deep(.ed-select__caret) {
+          font-size: 12px !important;
+        }
+      }
+    }
+  }
+}
+
+.chart-show-area {
+  width: 100%;
+  height: calc(100% - 32px);
+}
+
+.buttons-bar {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+
+  gap: 16px;
+
+  .divider {
+    width: 1px;
+    height: 16px;
+    border-left: 1px solid rgba(31, 35, 41, 0.15);
+  }
+}
+
+.chart-select-container {
+  padding: 3px;
+  display: flex;
+  flex-direction: row;
+  gap: 4px;
+  border-radius: 6px;
+
+  border: 1px solid rgba(217, 220, 223, 1);
+
+  .chart-select {
+    min-width: 40px;
+    width: 40px;
+    height: 24px;
+
+    :deep(.ed-select__wrapper) {
+      padding: 4px;
+      min-height: 24px;
+      box-shadow: unset;
+      border-radius: 6px;
+
+      &:hover {
+        background: rgba(31, 35, 41, 0.1);
+      }
+      &:active {
+        background: rgba(31, 35, 41, 0.1);
+      }
+    }
+    :deep(.ed-select__caret) {
+      font-size: 12px !important;
+    }
+  }
+}
+</style>