big-model-web/src/views/manage/knowledge/documents/index.vue

<template>
  <div class="flex h-full w-full">
    <div class="mr-[1rem] w-[13rem]">
      <div class="menu-title">
        <span v-title>{{ state.knowledge?.name }}</span>
      </div>
      <template v-for="(item, index) in menus">
        <div
          class="w-full bg-[#ffffff] p-[var(--czr-gap)] last:rounded-b-[0.5rem]"
        >
          <div
            class="menu-item __hover"
            :class="{ active: state.menu === item.value }"
            @click="
              () => {
                state.menu = item.value
                $router.replace({
                  name: '78430247-a531-4c8f-8a08-c88e93a836e2',
                  query: { menu: item.value },
                })
              }
            "
          >
            <SvgIcon :name="item.icon" :active="state.menu === item.value" />
            {{ item.label }}
          </div>
        </div>
      </template>
    </div>
    <component
      v-if="state.knowledge.ID"
      :is="menus.filter((v) => v.value === state.menu)[0]?.com"
      :knowledge="state.knowledge"
    />
  </div>
</template>

<script setup lang="ts">
import {
  defineAsyncComponent,
  getCurrentInstance,
  onMounted,
  provide,
  reactive,
  ref,
} from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { datasetsDetail } from '@/api/modules/knowledge'
import { ElMessage } from 'element-plus'

const route = useRoute()
const router = useRouter()
const emit = defineEmits([])
const props = defineProps({})
const { proxy }: any = getCurrentInstance()
const menus = [
  {
    label: '文档',
    value: 'document',
    icon: 'document',
    com: defineAsyncComponent(() => import('./document/index.vue')),
  },
  {
    label: '问答',
    value: 'qa',
    icon: 'qa',
    com: defineAsyncComponent(() => import('./qa/index.vue')),
  },
  {
    label: '召回测试',
    value: 'test',
    icon: 'back_1',
    com: defineAsyncComponent(() => import('./test/index.vue')),
  },
  // { label: '设置', value: 'config', icon: 'config' },
]
const state: any = reactive({
  ID: route.params.id,
  knowledge: {},
  menu: null,
})
provide('ID', state.ID)
const initDetail = () => {
  if (state.ID) {
    const m = route.query.menu
    if (m && menus.some((v) => v.value === m)) {
      state.menu = m
    } else {
      state.menu = menus[0].value
    }
    datasetsDetail(state.ID)
      .then(({ data }: any) => {
        state.knowledge = {
          ...data,
          ID: data.id,
        }
      })
      .catch(() => {})
  } else {
    router.push({ name: '4342bfff-1ea8-4f4c-b562-3cdc1fde116f' })
  }
}
onMounted(() => {
  initDetail()
})
</script>

<style lang="scss" scoped>
.menu-title {
  width: 13rem;
  height: 2.88rem;
  background-image: url('@/assets/images/knowledge-document-menu.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  border-radius: 0.5rem 0.5rem 0 0;
  font-weight: bold;
  font-size: 1rem;
  color: #303133;
  display: flex;
  align-items: center;
  padding: 0 var(--czr-gap);
}
.menu-item {
  width: 100%;
  height: 2.25rem;
  display: flex;
  align-items: center;
  font-size: 0.88rem;
  padding: 0 var(--czr-gap);
  color: #606266;
  border-radius: 0.25rem;
  .svg-icon {
    margin-right: 1rem;
  }
  &.active {
    color: var(--czr-main-color);
    background-color: rgba(var(--czr-main-color-rgb), 0.1);
  }
}
</style>