csg-web/src/views/module_ai_knowledge/components/KnowledgeInfo.vue

<!-- 知识库信息组件 —— 对应源代码 KnowledgeInfo.tsx -->
<template>
  <div :class="styles.content">
    <div :class="styles.titleBlock">
      <h2 :class="styles.sectionTitle">🎉 知识库创建</h2>
      <p :class="styles.sectionDesc">为您的知识库起了个名称，您也可以随时修改</p>
    </div>

    <div :class="styles.fieldCard">
      <div :class="styles.iconBox">
        <ElIcon><Coin /></ElIcon>
      </div>
      <ElFormItem label="知识库名称" :class="styles.fullFormItem">
        <ElInput
          :model-value="knowledgeBaseInfo.name"
          placeholder="智能体.docx..."
          @update:model-value="
            (value) =>
              setKnowledgeBaseInfo({
                ...knowledgeBaseInfo,
                name: value,
              })
          "
        />
      </ElFormItem>
    </div>

    <div :class="styles.fieldCard">
      <div :class="styles.iconBox">
        <ElIcon><ChatDotRound /></ElIcon>
      </div>
      <ElFormItem label="知识库描述" :class="styles.fullFormItem">
        <ElInput
          :model-value="knowledgeBaseInfo.description"
          type="textarea"
          :rows="3"
          placeholder="知识库描述"
          @update:model-value="
            (value) =>
              setKnowledgeBaseInfo({
                ...knowledgeBaseInfo,
                description: value,
              })
          "
        />
      </ElFormItem>
    </div>

    <UploadFile
      type="local"
      :file-list="fileList"
      :allowed-extensions="allowedExtensions"
      :on-file-list-change="onFileListChange"
      :set-file-ids="setFileIds"
    />
  </div>
</template>

<script setup lang="ts">
defineOptions({ name: "KnowledgeInfo" });

import { Coin, ChatDotRound } from "@element-plus/icons-vue";
import UploadFile from "./UploadFile.vue";
import type { UploadFile as UploadFileType, KnowledgeBaseInfoType } from "../types";
import styles from "../style/createKnowledge.module.scss";

interface Props {
  fileList: UploadFileType[];
  allowedExtensions: string[];
  onFileListChange: (fileList: UploadFileType[]) => void;
  setFileIds: (fileIds: string[]) => void;
  knowledgeBaseInfo: KnowledgeBaseInfoType;
  setKnowledgeBaseInfo: (knowledgeBaseInfo: KnowledgeBaseInfoType) => void;
}

defineProps<Props>();
</script>