diff --git a/frontend/src/views/ds/Datasource.vue b/frontend/src/views/ds/Datasource.vue
new file mode 100644
index 0000000..462a378
--- /dev/null
+++ b/frontend/src/views/ds/Datasource.vue
@@ -0,0 +1,444 @@
+<script lang="ts" setup>
+import { ref, computed, shallowRef, h } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus-secondary'
+import icon_searchOutline_outlined from '@/assets/svg/icon_search-outline_outlined.svg'
+import arrow_down from '@/assets/svg/arrow-down.svg'
+import icon_add_outlined from '@/assets/svg/icon_add_outlined.svg'
+import EmptyBackground from '@/views/dashboard/common/EmptyBackground.vue'
+import { useRouter } from 'vue-router'
+import DataTable from './DataTable.vue'
+import icon_done_outlined from '@/assets/svg/icon_done_outlined.svg'
+import { datasourceApi } from '@/api/datasource'
+import AddDrawer from '@/views/ds/AddDrawer.vue'
+import Card from './Card.vue'
+import { useEmitt } from '@/utils/useEmitt'
+import DelMessageBox from './DelMessageBox.vue'
+import { dsTypeWithImg } from './js/ds-type'
+import { useI18n } from 'vue-i18n'
+import { useUserStore } from '@/stores/user'
+import { chatApi } from '@/api/chat'
+const userStore = useUserStore()
+interface Datasource {
+  name: string
+  num: string
+  type_name: string
+  type: string
+  img: string
+  description: string
+  id?: string
+}
+
+const router = useRouter()
+const { t } = useI18n()
+const keywords = ref('')
+const defaultDatasourceKeywords = ref('')
+const addDrawerRef = ref()
+const searchLoading = ref(false)
+
+const datasourceList = shallowRef([] as Datasource[])
+const defaultDatasourceList = shallowRef(dsTypeWithImg as (Datasource & { img: string })[])
+
+const currentDefaultDatasource = ref('')
+const datasourceListWithSearch = computed(() => {
+  if (!keywords.value && !currentDatasourceType.value) return datasourceList.value
+  return datasourceList.value.filter(
+    (ele) =>
+      ele.name.toLowerCase().includes(keywords.value.toLowerCase()) &&
+      (ele.type === currentDatasourceType.value || !currentDatasourceType.value)
+  )
+})
+const defaultDatasourceListWithSearch = computed(() => {
+  if (!defaultDatasourceKeywords.value) return defaultDatasourceList.value
+  return defaultDatasourceList.value.filter((ele) =>
+    ele.name.toLowerCase().includes(defaultDatasourceKeywords.value.toLowerCase())
+  )
+})
+
+const currentDatasourceType = ref('')
+
+const handleDefaultDatasourceChange = (item: any) => {
+  if (currentDatasourceType.value === item.type) {
+    currentDefaultDatasource.value = ''
+    currentDatasourceType.value = ''
+  } else {
+    currentDefaultDatasource.value = item.name
+    currentDatasourceType.value = item.type
+  }
+}
+
+const formatKeywords = (item: string) => {
+  if (!defaultDatasourceKeywords.value) return item
+  return item.replaceAll(
+    defaultDatasourceKeywords.value,
+    `<span class="isSearch">${defaultDatasourceKeywords.value}</span>`
+  )
+}
+const handleEditDatasource = (res: any) => {
+  addDrawerRef.value.handleEditDatasource(res)
+}
+
+const handleQuestion = async (id: string) => {
+  try {
+    await chatApi.checkLLMModel()
+  } catch (error: any) {
+    console.error(error)
+    let errorMsg = t('model.default_miss')
+    let confirm_text = t('datasource.got_it')
+    if (userStore.isAdmin) {
+      errorMsg = t('model.default_miss_admin')
+      confirm_text = t('model.to_config')
+    }
+    ElMessageBox.confirm(t('qa.ask_failed'), {
+      confirmButtonType: 'primary',
+      tip: errorMsg,
+      showCancelButton: userStore.isAdmin,
+      confirmButtonText: confirm_text,
+      cancelButtonText: t('common.cancel'),
+      customClass: 'confirm-no_icon',
+      autofocus: false,
+      showClose: false,
+      callback: (val: string) => {
+        if (userStore.isAdmin && val === 'confirm') {
+          router.push('/system/model')
+        }
+      },
+    })
+    return
+  }
+  router.push({
+    path: '/chat/index',
+    query: {
+      start_chat: id,
+    },
+  })
+}
+
+const handleAddDatasource = () => {
+  addDrawerRef.value.handleAddDatasource()
+}
+
+const refreshData = () => {
+  search()
+}
+
+const panelClick = () => {
+  console.info('panelClick')
+}
+
+const smartClick = () => {
+  console.info('smartClick')
+}
+
+const deleteHandler = (item: any) => {
+  ElMessageBox.confirm('', {
+    confirmButtonType: 'danger',
+    tip: t('datasource.operate_with_caution'),
+    confirmButtonText: t('dashboard.delete'),
+    cancelButtonText: t('common.cancel'),
+    customClass: 'confirm-no_icon',
+    autofocus: false,
+    dangerouslyUseHTMLString: true,
+    message: h(
+      DelMessageBox,
+      {
+        name: item.name,
+        panelNum: 1,
+        smartNum: 4,
+        onPanelClick: panelClick,
+        onSmartClick: smartClick,
+        t,
+      },
+      ''
+    ),
+  }).then(() => {
+    datasourceApi.delete(item.id).then(() => {
+      ElMessage({
+        type: 'success',
+        message: t('dashboard.delete_success'),
+      })
+      search()
+    })
+  })
+  // .catch(() => {
+  //   ElMessageBox.confirm(t('datasource.data_source_de', { msg: item.name }), {
+  //     tip: t('datasource.cannot_be_deleted'),
+  //     cancelButtonText: t('datasource.got_it'),
+  //     showConfirmButton: false,
+  //     customClass: 'confirm-no_icon',
+  //     autofocus: false,
+  //   })
+  // })
+}
+
+const search = () => {
+  searchLoading.value = true
+  datasourceApi
+    .list()
+    .then((res: any) => {
+      datasourceList.value = res
+    })
+    .finally(() => {
+      searchLoading.value = false
+    })
+}
+search()
+
+const currentDataTable = ref()
+const dataTableDetail = (ele: any) => {
+  currentDataTable.value = ele
+}
+
+const back = () => {
+  currentDataTable.value = null
+}
+
+useEmitt({
+  name: 'ds-index-click',
+  callback: back,
+})
+</script>
+
+<template>
+  <div v-show="!currentDataTable" class="datasource-config no-padding">
+    <div class="datasource-methods">
+      <span class="title">{{ $t('ds.title') }}</span>
+      <div class="button-input">
+        <el-input
+          v-model="keywords"
+          clearable
+          style="width: 240px; margin-right: 12px"
+          :placeholder="$t('datasource.search')"
+        >
+          <template #prefix>
+            <el-icon>
+              <icon_searchOutline_outlined class="svg-icon" />
+            </el-icon>
+          </template>
+        </el-input>
+
+        <el-popover popper-class="system-default_datasource" placement="bottom-end">
+          <template #reference>
+            <el-button secondary>
+              {{ currentDefaultDatasource || $t('datasource.all_types') }}
+              <el-icon style="margin-left: 8px">
+                <arrow_down></arrow_down>
+              </el-icon> </el-button
+          ></template>
+          <div class="popover">
+            <el-input
+              v-model="defaultDatasourceKeywords"
+              clearable
+              style="width: 100%; margin-right: 12px"
+              :placeholder="$t('datasource.search_by_name')"
+            >
+              <template #prefix>
+                <el-icon>
+                  <icon_searchOutline_outlined class="svg-icon" />
+                </el-icon>
+              </template>
+            </el-input>
+            <div class="popover-content">
+              <div
+                v-for="ele in defaultDatasourceListWithSearch"
+                :key="ele.name"
+                class="popover-item"
+                :class="currentDefaultDatasource === ele.name && 'isActive'"
+                @click="handleDefaultDatasourceChange(ele)"
+              >
+                <img :src="ele.img" width="24px" height="24px" />
+                <div class="datasource-name" v-html="formatKeywords(ele.name)"></div>
+                <el-icon size="16" class="done">
+                  <icon_done_outlined></icon_done_outlined>
+                </el-icon>
+              </div>
+              <div v-if="!defaultDatasourceListWithSearch.length" class="popover-item empty">
+                {{ t('model.relevant_results_found') }}
+              </div>
+            </div>
+          </div>
+        </el-popover>
+
+        <el-button type="primary" @click="handleAddDatasource">
+          <template #icon>
+            <icon_add_outlined></icon_add_outlined>
+          </template>
+          {{ $t('datasource.new_data_source') }}
+        </el-button>
+      </div>
+    </div>
+    <EmptyBackground
+      v-if="!!keywords && !datasourceListWithSearch.length"
+      :description="$t('datasource.relevant_content_found')"
+      class="datasource-yet"
+      img-type="tree"
+    />
+
+    <div v-else class="card-content">
+      <el-row :gutter="16" class="w-full">
+        <el-col
+          v-for="ele in datasourceListWithSearch"
+          :key="ele.id"
+          :xs="24"
+          :sm="12"
+          :md="12"
+          :lg="8"
+          :xl="6"
+          class="mb-16"
+        >
+          <Card
+            :id="ele.id"
+            :key="ele.id"
+            :name="ele.name"
+            :type="ele.type"
+            :type-name="ele.type_name"
+            :num="ele.num"
+            :description="ele.description"
+            @question="handleQuestion"
+            @edit="handleEditDatasource(ele)"
+            @del="deleteHandler(ele)"
+            @data-table-detail="dataTableDetail(ele)"
+          ></Card>
+        </el-col>
+      </el-row>
+    </div>
+    <template v-if="!keywords && !datasourceListWithSearch.length && !searchLoading">
+      <EmptyBackground
+        class="datasource-yet"
+        :description="$t('datasource.data_source_yet')"
+        img-type="noneWhite"
+      />
+
+      <div style="text-align: center; margin-top: -10px">
+        <el-button type="primary" @click="handleAddDatasource">
+          <template #icon>
+            <icon_add_outlined></icon_add_outlined>
+          </template>
+          {{ $t('datasource.new_data_source') }}
+        </el-button>
+      </div>
+    </template>
+
+    <AddDrawer ref="addDrawerRef" @search="search"></AddDrawer>
+  </div>
+  <DataTable
+    v-if="currentDataTable"
+    :info="currentDataTable"
+    @refresh="refreshData"
+    @back="back"
+  ></DataTable>
+</template>
+
+<style lang="less" scoped>
+.datasource-config {
+  height: calc(100% - 16px);
+  padding: 16px 0 16px 0;
+  .datasource-methods {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 16px;
+    padding: 0 24px 0 24px;
+    .title {
+      font-weight: 500;
+      font-size: 20px;
+      line-height: 28px;
+    }
+  }
+
+  .card-content {
+    max-height: calc(100% - 40px);
+    overflow-y: auto;
+    padding: 0 8px 0 24px;
+
+    .w-full {
+      width: 100%;
+    }
+
+    .mb-16 {
+      margin-bottom: 16px;
+    }
+  }
+
+  .datasource-yet {
+    padding-bottom: 0;
+    height: auto;
+    padding-top: 200px;
+  }
+}
+</style>
+
+<style lang="less">
+.system-default_datasource.system-default_datasource {
+  padding: 4px 0;
+  width: 325px !important;
+  box-shadow: 0px 4px 8px 0px #1f23291a;
+  border: 1px solid #dee0e3;
+  .ed-input {
+    .ed-input__wrapper {
+      box-shadow: none;
+    }
+
+    border-bottom: 1px solid #1f232926;
+  }
+
+  .popover {
+    .popover-content {
+      padding: 4px;
+    }
+    .popover-item {
+      height: 32px;
+      display: flex;
+      align-items: center;
+      padding-left: 12px;
+      padding-right: 8px;
+      margin-bottom: 2px;
+      position: relative;
+      border-radius: 4px;
+      cursor: pointer;
+      &:not(.empty):hover {
+        background: #1f23291a;
+      }
+
+      &.empty {
+        font-weight: 400;
+        font-size: 14px;
+        line-height: 22px;
+        color: #8f959e;
+        cursor: default;
+      }
+
+      .datasource-name {
+        margin-left: 8px;
+        font-weight: 400;
+        font-size: 14px;
+        line-height: 22px;
+      }
+
+      .done {
+        margin-left: auto;
+        display: none;
+      }
+
+      .isSearch {
+        color: var(--ed-color-primary);
+      }
+
+      &.isActive {
+        color: var(--ed-color-primary);
+
+        .done {
+          display: block;
+        }
+      }
+    }
+  }
+}
+
+.confirm-no_icon {
+  border-radius: 12px;
+  padding: 24px;
+  .tip {
+    margin-top: 24px;
+  }
+}
+</style>