From b334123217f35bcb12374fc4b4697d40ad5b4f73 Mon Sep 17 00:00:00 2001
From: "zangch@mesnac.com" <zangch@mesnac.com>
Date: Mon, 29 Sep 2025 14:34:45 +0800
Subject: [PATCH] =?UTF-8?q?feat(dms):=20=E5=A4=8D=E5=88=B6ai=E7=9F=A5?=
 =?UTF-8?q?=E8=AF=86=E5=BA=93?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 实现知识库列表展示与搜索功能
- 支持知识库的增删改查操作
- 添加知识库状态切换功能
- 集成知识库内容管理页面
- 支持文档上传与向量化处理
- 实现知识库类型与AI模型关联配置
---
 src/views/dms/aiKnowledge/index.vue           | 632 ++++++++++++++++++
 .../dms/aiKnowledge/knowledgeBaseCreate.vue   | 116 ++++
 .../dms/aiKnowledge/knowledgeContent.vue      | 496 ++++++++++++++
 .../aiKnowledge/knowledgeContentPreview.vue   | 319 +++++++++
 .../aiKnowledge/knowledgeContentUpload.vue    | 436 ++++++++++++
 5 files changed, 1999 insertions(+)
 create mode 100644 src/views/dms/aiKnowledge/index.vue
 create mode 100644 src/views/dms/aiKnowledge/knowledgeBaseCreate.vue
 create mode 100644 src/views/dms/aiKnowledge/knowledgeContent.vue
 create mode 100644 src/views/dms/aiKnowledge/knowledgeContentPreview.vue
 create mode 100644 src/views/dms/aiKnowledge/knowledgeContentUpload.vue

diff --git a/src/views/dms/aiKnowledge/index.vue b/src/views/dms/aiKnowledge/index.vue
new file mode 100644
index 0000000..664f0b1
--- /dev/null
+++ b/src/views/dms/aiKnowledge/index.vue
@@ -0,0 +1,632 @@
+<template>
+  <div class="kb-list-page">
+    <transition :enter-active-class="proxy?.animate.searchAnimate.enter"
+                :leave-active-class="proxy?.animate.searchAnimate.leave">
+      <div v-show="showSearch" class="mb-[10px]">
+        <el-card shadow="hover">
+          <el-form ref="queryFormRef" :model="queryParams" :inline="true" label-width="120px">
+            <el-form-item label="知识库名称" prop="knowledgeBaseName">
+              <el-input v-model="queryParams.knowledgeBaseName" placeholder="请输入知识库名称" clearable
+                        @keyup.enter="handleQuery"/>
+            </el-form-item>
+            <el-form-item label="AI模型" prop="modelId">
+              <el-select v-model="queryParams.modelId" placeholder="请选择AI模型" clearable @keyup.enter="handleQuery">
+                <el-option
+                  v-for="model in aiModelList"
+                  :key="model.modelId"
+                  :label="model.modelName"
+                  :value="model.modelId"
+                />
+              </el-select>
+
+            </el-form-item>
+<!--            <el-form-item label="知识库类型" prop="knowledgeBaseTypeId">
+              <el-select v-model="queryParams.knowledgeBaseTypeId" placeholder="请选择知识库类型" clearable
+                         @keyup.enter="handleQuery">
+                <el-option
+                  v-for="model in aiKnowledgeBaseTypeList"
+                  :key="model.knowledgeBaseTypeId"
+                  :label="model.knowledgeBaseTypeName"
+                  :value="model.knowledgeBaseTypeId"
+                />
+              </el-select>
+            </el-form-item>-->
+
+
+            <!--            <el-form-item label="状态(1启用，0禁用)" prop="knowledgeBaseStatus">-->
+            <!--              <el-select v-model="queryParams.knowledgeBaseStatus" placeholder="请选择状态(1启用，0禁用)" clearable >-->
+            <!--                <el-option v-for="dict in ${dictType}" :key="dict.value" :label="dict.label" :value="dict.value"/>-->
+            <!--              </el-select>-->
+            <!--            </el-form-item>-->
+            <el-form-item>
+              <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+              <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+            </el-form-item>
+          </el-form>
+        </el-card>
+      </div>
+    </transition>
+
+    <el-card shadow="never">
+      <template #header>
+        <el-row :gutter="10" class="mb8">
+          <el-col :span="1.5">
+            <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['ai:aiKnowledgeBase:add']">
+              创建知识库
+            </el-button>
+          </el-col>
+        </el-row>
+      </template>
+
+      <el-row :gutter="20" v-loading="loading">
+
+        <el-col v-for="kb in aiKnowledgeBaseList" :key="kb.knowledgeBaseId" :span="8" style="margin-bottom:20px;">
+          <div class="kb-card" :class="kb.knowledgeBaseStatus === '1' ? 'enabled' : 'disabled'" @click="goDetail(kb)">
+            <div class="kb-card-header">
+              <img :src="kb.knowledgeBaseIcon ? kb.knowledgeBaseIcon : knowledgeBaseIcon" alt="knowledgeBaseIcon"
+                   class="knowledge-base-icon"/>
+              <!--            <svg-icon class-name="search-icon" icon-class="knowledge-base"/>-->
+              <div class="kb-card-title-container">
+                <div class="kb-card-title">{{ kb.knowledgeBaseName }}</div>
+                <div class="kb-card-knowledge-type">{{ kb.knowledgeBaseTypeName }}</div>
+              </div>
+            </div>
+            <div class="kb-card-desc" :title="kb.knowledgeBaseDesc">{{ kb.knowledgeBaseDesc }}</div>
+            <div class="kb-card-footer">
+              <div class="kb-card-info">
+                <span>向量模型：{{ kb.modelName }}</span>
+              </div>
+              <div class="kb-card-actions">
+                <el-button size="small" type="primary" @click.stop="handleUpdate(kb)">编辑</el-button>
+                <el-button size="small" type="danger" @click.stop="handleDelete(kb)">删除</el-button>
+<!--                <el-button size="small" type="primary" @click.stop="openArrangeDialog(kb)">编排</el-button>-->
+                <el-button size="small" type="success" @click.stop="goQA(kb)" v-if="kb.knowledgeBaseStatus === '1'">检索</el-button>
+              </div>
+            </div>
+            <div class="kb-card-status-switch">
+              <span v-if="kb.knowledgeBaseStatus === '1'">启用</span>
+              <span v-else>禁用</span>
+              <el-switch
+                v-model="switchStatusMap[String(kb.knowledgeBaseId)]"
+                :active-value="'1'"
+                :inactive-value="'0'"
+                @change="(val: string) => handleStatusChange(kb, val)"
+                @click.stop
+                style="margin-left: 8px;"
+              />
+            </div>
+          </div>
+        </el-col>
+      </el-row>
+
+      <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
+                  v-model:limit="queryParams.pageSize" @pagination="getList"/>
+    </el-card>
+
+    <!-- 添加或修改AI知识库对话框 -->
+    <el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
+      <el-form ref="aiKnowledgeBaseFormRef" :model="form" :rules="rules" label-width="120px">
+        <el-form-item label="知识库名称" prop="knowledgeBaseName">
+          <el-input v-model="form.knowledgeBaseName" placeholder="请输入知识库名称"/>
+        </el-form-item>
+        <el-form-item label="AI模型" prop="modelId">
+          <el-select v-model="form.modelId" placeholder="请选择AI模型">
+            <el-option
+              v-for="model in aiModelList"
+              :key="model.modelId"
+              :label="model.modelName"
+              :value="model.modelId"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="知识库类型" prop="knowledgeBaseTypeId">
+          <el-select v-model="form.knowledgeBaseTypeId" placeholder="请选择知识库类型">
+            <el-option
+              v-for="model in aiKnowledgeBaseTypeList"
+              :key="model.knowledgeBaseTypeId"
+              :label="model.knowledgeBaseTypeName"
+              :value="model.knowledgeBaseTypeId"
+            />
+          </el-select>
+        </el-form-item>
+<!--        <el-form-item label="分隔符" prop="knowledgeBaseSeparator">-->
+<!--          <el-input v-model="form.knowledgeBaseSeparator" placeholder="请输入分隔符"/>-->
+<!--        </el-form-item>-->
+<!--        <el-form-item label="检索条数" prop="retrieveLimit">-->
+<!--          <el-input v-model="form.retrieveLimit" placeholder="请输入知识库中检索的条数"/>-->
+<!--        </el-form-item>-->
+        <el-form-item label="文本块大小" prop="textBlockSize">
+          <el-input v-model="form.textBlockSize" placeholder="请输入文本块大小"/>
+        </el-form-item>
+        <el-form-item label="重叠字符数" prop="overlapCharacter">
+          <el-input v-model="form.overlapCharacter" placeholder="请输入重叠字符数"/>
+        </el-form-item>
+        <el-form-item label="知识库描述" prop="knowledgeBaseDesc">
+          <el-input type="textarea" v-model="form.knowledgeBaseDesc" placeholder="请输入知识库描述"/>
+        </el-form-item>
+        <el-form-item label="状态" prop="knowledgeBaseStatus">
+          <el-radio-group v-model="form.knowledgeBaseStatus">
+            <el-radio
+              v-for="dict in ai_knowledge_base_status"
+              :key="dict.value"
+              :value="dict.value"
+            >{{ dict.label }}
+            </el-radio>
+          </el-radio-group>
+
+
+        </el-form-item>
+        <el-form-item label="向量库" prop="vector" v-if="false">
+          <el-input v-model="form.vector" placeholder="请输入向量库"/>
+        </el-form-item>
+        <el-form-item label="是否公开(1是，0否)" prop="openFlag" v-if="false">
+          <el-input v-model="form.openFlag" placeholder="请输入是否公开(1是，0否)"/>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
+          <el-button @click="cancel">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+
+
+    <el-dialog v-model="showArrangeDialog" title="AI问答编排设置" width="900px" top="5vh" :close-on-click-modal="false">
+      <AiChatSettings v-if="showArrangeDialog"/>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {ref, computed} from 'vue'
+import {useRouter} from 'vue-router'
+import {ElMessageBox} from 'element-plus'
+import KnowledgeBaseCreate from './knowledgeBaseCreate.vue'
+// import AiChatSettings from '../../base/aiApp/aiAppConfig.vue'
+import AiChatSettings from '@/views/ai/base/aiApp/aiAppConfig.vue'
+
+
+import {
+  listAiKnowledgeBase,
+  getAiKnowledgeBase,
+  delAiKnowledgeBase,
+  addAiKnowledgeBase,
+  updateAiKnowledgeBase
+} from '@/api/ai/skill/aiKnowledgeBase';
+import {AiKnowledgeBaseVO, AiKnowledgeBaseQuery, AiKnowledgeBaseForm} from '@/api/ai/skill/aiKnowledgeBase/types';
+
+import {getAiKnowledgeBaseTypeList} from '@/api/ai/base/aiKnowledgeBaseType';
+import {AiKnowledgeBaseTypeVO} from '@/api/ai/base//aiKnowledgeBaseType/types';
+
+import {getAiModelList} from '@/api/ai/base/aiModel';
+import {AiModelVO} from '@/api/ai/base/aiModel/types';
+
+import knowledgeBaseIcon from '@/assets/knowledge-base.png'
+
+const {proxy} = getCurrentInstance() as ComponentInternalInstance;
+
+const {ai_knowledge_base_status} = toRefs<any>(proxy?.useDict('ai_knowledge_base_status'));
+
+const aiKnowledgeBaseList = ref<AiKnowledgeBaseVO[]>([]);
+const buttonLoading = ref(false);
+const loading = ref(true);
+const showSearch = ref(true);
+const ids = ref<Array<string | number>>([]);
+const single = ref(true);
+const multiple = ref(true);
+const total = ref(0);
+
+const queryFormRef = ref<ElFormInstance>();
+const aiKnowledgeBaseFormRef = ref<ElFormInstance>();
+
+const dialog = reactive<DialogOption>({
+  visible: false,
+  title: ''
+});
+
+const aiKnowledgeBaseTypeList = ref<AiKnowledgeBaseTypeVO[]>([]);
+const aiModelList = ref<AiModelVO[]>([]);
+
+
+
+const initFormData: AiKnowledgeBaseForm = {
+  knowledgeBaseId: undefined,
+  knowledgeBaseName: undefined,
+  modelId: undefined,
+  knowledgeBaseTypeId: undefined,
+  knowledgeBaseSeparator: undefined,
+  retrieveLimit: undefined,
+  textBlockSize: undefined,
+  overlapCharacter: undefined,
+  questionSeparator: undefined,
+  knowledgeBaseDesc: undefined,
+  knowledgeBaseStatus: undefined,
+  vector: 'milvus',
+  openFlag: undefined,
+}
+const data = reactive<PageData<AiKnowledgeBaseForm, AiKnowledgeBaseQuery>>({
+  form: {...initFormData},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    knowledgeBaseId: undefined,
+    knowledgeBaseName: undefined,
+    modelId: undefined,
+    knowledgeBaseTypeId: undefined,
+    knowledgeBaseSeparator: undefined,
+    retrieveLimit: undefined,
+    textBlockSize: undefined,
+    overlapCharacter: undefined,
+    questionSeparator: undefined,
+    knowledgeBaseDesc: undefined,
+    knowledgeBaseStatus: undefined,
+    vector: undefined,
+    openFlag: undefined,
+    params: {}
+  },
+  rules: {
+    knowledgeBaseName: [
+      {required: true, message: "知识库名称不能为空", trigger: "blur"}
+    ],
+    modelId: [
+      {required: true, message: "AI模型不能为空", trigger: "blur"}
+    ],
+    knowledgeBaseTypeId: [
+      {required: true, message: "知识库类型不能为空", trigger: "blur"}
+    ],
+    knowledgeBaseStatus: [
+      {required: true, message: "状态不能为空", trigger: "change"}
+    ],
+  }
+});
+
+const {queryParams, form, rules} = toRefs(data);
+
+/** 查询AI知识库类型下拉列表 */
+const getAiKnowledgeBaseTypes = async () => {
+  const res = await getAiKnowledgeBaseTypeList({});
+  aiKnowledgeBaseTypeList.value = res.data;
+}
+
+/** 查询AI模型下来列表 */
+const getAiModels = async () => {
+  const res = await getAiModelList({modelTypeId: 2});
+  aiModelList.value = res.data;
+}
+
+
+/** 查询AI知识库列表 */
+const getList = async () => {
+  loading.value = true;
+  const res = await listAiKnowledgeBase(queryParams.value);
+  aiKnowledgeBaseList.value = res.rows;
+  // 初始化switchStatusMap
+  aiKnowledgeBaseList.value.forEach(kb => {
+    switchStatusMap.value[String(kb.knowledgeBaseId)] = kb.knowledgeBaseStatus
+  })
+  total.value = res.total;
+  loading.value = false;
+}
+
+/** 取消按钮 */
+const cancel = () => {
+  reset();
+  dialog.visible = false;
+}
+
+/** 表单重置 */
+const reset = () => {
+  form.value = {...initFormData};
+  aiKnowledgeBaseFormRef.value?.resetFields();
+}
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.value.pageNum = 1;
+  getList();
+}
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value?.resetFields();
+  handleQuery();
+}
+
+/** 多选框选中数据 */
+const handleSelectionChange = (selection: AiKnowledgeBaseVO[]) => {
+  ids.value = selection.map(item => item.knowledgeBaseId);
+  single.value = selection.length != 1;
+  multiple.value = !selection.length;
+}
+
+/** 新增按钮操作 */
+const handleAdd = () => {
+  reset();
+  dialog.visible = true;
+  dialog.title = "添加AI知识库";
+}
+
+/** 修改按钮操作 */
+const handleUpdate = async (row?: AiKnowledgeBaseVO) => {
+  reset();
+  const _knowledgeBaseId = row?.knowledgeBaseId || ids.value[0]
+  const res = await getAiKnowledgeBase(_knowledgeBaseId);
+  Object.assign(form.value, res.data);
+  dialog.visible = true;
+  dialog.title = "修改AI知识库";
+}
+
+/** 提交按钮 */
+const submitForm = () => {
+  aiKnowledgeBaseFormRef.value?.validate(async (valid: boolean) => {
+    if (valid) {
+      buttonLoading.value = true;
+      if (form.value.knowledgeBaseId) {
+        await updateAiKnowledgeBase(form.value).finally(() => buttonLoading.value = false);
+      } else {
+        await addAiKnowledgeBase(form.value).finally(() => buttonLoading.value = false);
+      }
+      proxy?.$modal.msgSuccess("操作成功");
+      dialog.visible = false;
+      await getList();
+    }
+  });
+}
+
+/** 删除按钮操作 */
+const handleDelete = async (row?: AiKnowledgeBaseVO) => {
+  const _knowledgeBaseIds = row?.knowledgeBaseId || ids.value;
+  await proxy?.$modal.confirm('是否确认删除AI知识库["' + row.knowledgeBaseName + '"]的数据项？').finally(() => loading.value = false);
+  await delAiKnowledgeBase(_knowledgeBaseIds);
+  proxy?.$modal.msgSuccess("删除成功");
+  await getList();
+}
+
+onMounted(() => {
+  getR();
+  getList();
+  getAiKnowledgeBaseTypes();
+  getAiModels();
+});
+
+
+const router = useRouter();
+const  knowledgeBaseTypeId = ref('')
+const getR = async () => {
+  // 从当前路由的查询参数中提取workshopId，并赋值给workshopId变量
+  knowledgeBaseTypeId.value = router.currentRoute._rawValue.query && router.currentRoute._rawValue.query.knowledgeBaseTypeId;
+  // 将提取到的workshopId赋值给queryParams对象的workshopId属性
+  queryParams.value.knowledgeBaseTypeId = knowledgeBaseTypeId.value;
+};
+
+
+
+const searchName = ref('')
+const page = ref(1)
+const pageSize = 6
+const showCreateDialog = ref(false)
+const showArrangeDialog = ref(false)
+
+const kbList = ref([
+  {
+    id: 1,
+    icon: '',
+    name: '产品知识库',
+    description: '产品相关知识',
+    vectorModel: 'text-embedding-ada-002',
+    status: 'enabled'
+  },
+  {id: 2, icon: '', name: '技术文档库', description: '技术文档集合', vectorModel: 'bge-large-zh', status: 'disabled'},
+  {
+    id: 3,
+    icon: '',
+    name: '运营知识库',
+    description: '运营相关知识',
+    vectorModel: 'text-embedding-ada-002',
+    status: 'enabled'
+  },
+  // ...更多模拟数据
+])
+
+const filteredList = computed(() => {
+  if (!searchName.value) return kbList.value
+  return kbList.value.filter(kb => kb.name.includes(searchName.value))
+})
+const pagedList = computed(() => {
+  const start = (page.value - 1) * pageSize
+  return filteredList.value.slice(start, start + pageSize)
+})
+
+// 新增：用于受控切换的临时状态
+const switchStatusMap = ref<Record<string, string>>({})
+
+const handleStatusChange = async (kb: any, val: string) => {
+  try {
+    loading.value = true;
+    await proxy?.$modal.confirm(`确定要将知识库“${kb.knowledgeBaseName}”${val === '1' ? '启用' : '禁用'}吗？`);
+    let statusChangeForm = ref<AiKnowledgeBaseVO>();
+    Object.assign(statusChangeForm, kb);
+    statusChangeForm.knowledgeBaseStatus = val
+    await updateAiKnowledgeBase(statusChangeForm)
+      .then(() => {
+        proxy?.$modal.msgSuccess("操作成功");
+        kb.knowledgeBaseStatus = val
+        switchStatusMap.value[String(kb.knowledgeBaseId)] = val
+      }).catch(() => {
+        // 还原switch
+        switchStatusMap.value[String(kb.knowledgeBaseId)] = kb.knowledgeBaseStatus
+      })
+  } catch {
+    switchStatusMap.value[String(kb.knowledgeBaseId)] = kb.knowledgeBaseStatus
+  }finally {
+    loading.value = false;
+    console.log(kb)
+  }
+}
+
+function goCreate() {
+  router.push({name: 'KnowledgeBaseCreate'})
+}
+
+function goDetail(kb: any) {
+  router.push({name: 'KnowledgeContent', params: {knowledgeBaseId: kb.knowledgeBaseId,modelId:kb.modelId,knowledgeBaseName: encodeURIComponent(kb.knowledgeBaseName)}})
+}
+
+function editKb(kb: any) {
+  router.push({name: 'KnowledgeBaseEdit', params: {id: kb.id}})
+}
+
+function deleteKb(kb: any) {
+  // TODO: 删除逻辑
+  kbList.value = kbList.value.filter(item => item.id !== kb.id)
+}
+
+function goQA(kb: any) {
+  router.push({name: 'KnowledgeBaseQA', params: {knowledgeBaseId: kb.knowledgeBaseId,embeddingModelId:kb.modelId,retrieveLimit:kb.retrieveLimit ? kb.retrieveLimit:5}})
+}
+
+function openArrangeDialog(kb: any) {
+  showArrangeDialog.value = true
+}
+
+function onCreated(newKb) {
+  // 可选：将新建的知识库添加到kbList
+  showCreateDialog.value = false
+}
+
+function onCreateDialogClose() {
+  showCreateDialog.value = false
+}
+</script>
+
+<style scoped>
+.kb-list-page {
+  padding: 24px;
+}
+
+.kb-list-header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 24px;
+}
+
+.kb-card {
+  background: #fff;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px #f0f1f2;
+  padding: 20px;
+  cursor: pointer;
+  position: relative;
+  transition: box-shadow .2s;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: 200px;
+}
+
+.kb-card.enabled {
+  border-left: 6px solid #67c23a;
+}
+
+.kb-card.disabled {
+  border-left: 6px solid #dcdfe6;
+  background: #f5f7fa;
+}
+
+.kb-card-header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 12px;
+}
+
+.knowledge-base-icon {
+  width: 40px;
+  height: 40px;
+  margin-right: 10px;
+}
+
+.kb-card-title-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  flex: 1;
+}
+
+.kb-card-title {
+  font-size: 18px;
+  font-weight: bold;
+
+}
+
+.kb-card-knowledge-type {
+  font-size: 14px;
+  color: #666;
+  margin-top: 2px;
+}
+
+.kb-card-desc {
+  color: #888;
+  margin-bottom: 8px;
+  min-height: 32px;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.kb-card-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 16px;
+}
+
+.kb-card-info {
+  font-size: 13px;
+  color: #666;
+  margin-bottom: 0;
+}
+
+.kb-card-actions {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 0;
+  justify-content: flex-end;
+  align-items: center;
+}
+
+.kb-card-status {
+  display: none;
+}
+
+.kb-card-status-switch {
+  position: absolute;
+  top: 18px;
+  right: 18px;
+  display: flex;
+  align-items: center;
+  font-size: 13px;
+  font-weight: bold;
+  color: #222;
+  border-radius: 4px;
+  padding: 0;
+  z-index: 2;
+  gap: 8px;
+}
+
+.kb-card-status-switch span {
+  color: #fff;
+  background: #67c23a;
+  border-radius: 4px;
+  padding: 2px 10px;
+  display: inline-block;
+}
+
+.kb-card.disabled .kb-card-status-switch span {
+  background: #bfbfbf;
+}
+
+
+</style>
diff --git a/src/views/dms/aiKnowledge/knowledgeBaseCreate.vue b/src/views/dms/aiKnowledge/knowledgeBaseCreate.vue
new file mode 100644
index 0000000..67c62ca
--- /dev/null
+++ b/src/views/dms/aiKnowledge/knowledgeBaseCreate.vue
@@ -0,0 +1,116 @@
+<template>
+  <div class="kb-create-page">
+<!--    <div class="kb-create-title">创建知识库</div>-->
+    <el-form :model="form" :rules="rules" ref="formRef" label-width="120px" class="kb-create-form">
+      <el-form-item label="知识库名称" prop="knowledgeBaseName">
+        <el-input v-model="form.knowledgeBaseName" placeholder="请输入知识库名称" />
+      </el-form-item>
+      <el-form-item label="知识库名称" prop="knowledgeBaseName">
+        <el-input v-model="form.knowledgeBaseName" placeholder="请输入知识库名称" />
+      </el-form-item>
+      <el-form-item label="分段长度" prop="segmentLength">
+        <el-input-number v-model="form.segmentLength" :min="1" :step="1" />
+      </el-form-item>
+      <el-form-item label="分段重叠" prop="segmentOverlap">
+        <el-input-number v-model="form.segmentOverlap" :min="0" :step="1" />
+      </el-form-item>
+      <el-form-item label="检索条数" prop="topK">
+        <el-input-number v-model="form.topK" :min="1" :step="1" />
+      </el-form-item>
+      <el-form-item label="知识库类型" prop="vectorStore">
+        <el-select v-model="form.vectorStore" placeholder="请选择知识库类型">
+          <el-option label="vectorStoreA" value="vectorStoreA" />
+          <el-option label="vectorStoreB" value="vectorStoreB" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="向量库" prop="vectorStore">
+        <el-select v-model="form.vectorStore" placeholder="请选择向量库">
+          <el-option label="vectorStoreA" value="vectorStoreA" />
+          <el-option label="vectorStoreB" value="vectorStoreB" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="向量模型" prop="vectorModel">
+        <el-select v-model="form.vectorModel" placeholder="请选择向量模型">
+          <el-option label="text-embedding-ada-002" value="text-embedding-ada-002" />
+          <el-option label="bge-large-zh" value="bge-large-zh" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="知识库描述" prop="description">
+        <el-input v-model="form.description" type="textarea" :rows="3" placeholder="请输入描述" />
+      </el-form-item>
+      <el-form-item label="状态" prop="status">
+        <el-radio-group v-model="form.status">
+          <el-radio label="enabled">启用</el-radio>
+          <el-radio label="disabled">禁用</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item>
+
+      </el-form-item>
+    </el-form>
+  </div>
+  <div style="display: flex;justify-content: center">
+    <el-button type="primary" @click="onSubmit">保存</el-button>
+    <el-button @click="onCancel">取消</el-button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, defineEmits } from 'vue'
+import { ElMessage } from 'element-plus'
+
+const emit = defineEmits(['created', 'cancel'])
+const formRef = ref()
+const form = ref({
+  name: '',
+  segmentLength: 100,
+  segmentOverlap: 20,
+  topK: 5,
+  vectorStore: '',
+  vectorModel: '',
+  description: '',
+  status: 'enabled',
+})
+const rules = {
+  name: [{ required: true, message: '请输入知识库名称', trigger: 'blur' }],
+  segmentLength: [{ required: true, type: 'number' as const, min: 1, message: '请输入正整数', trigger: 'blur' }],
+  segmentOverlap: [{ required: true, type: 'number' as const, min: 0, message: '请输入非负整数', trigger: 'blur' }],
+  topK: [{ required: true, type: 'number' as const, min: 1, message: '请输入正整数', trigger: 'blur' }],
+  vectorStore: [{ required: true, message: '请选择向量库', trigger: 'change' }],
+  vectorModel: [{ required: true, message: '请选择向量模型', trigger: 'change' }],
+  status: [{ required: true, message: '请选择状态', trigger: 'change' }],
+}
+
+function onSubmit() {
+  formRef.value.validate((valid: boolean) => {
+    if (valid) {
+      // TODO: 保存逻辑
+      ElMessage.success('保存成功')
+      emit('created', { ...form.value })
+    }
+  })
+}
+function onCancel() {
+  emit('cancel')
+}
+</script>
+
+<style scoped>
+.kb-create-page {
+  padding: 0;
+  max-width: 600px;
+  margin: 0 auto;
+}
+.kb-create-title {
+  font-size: 20px;
+  font-weight: bold;
+  margin-bottom: 24px;
+  text-align: center;
+}
+.kb-create-form {
+  background: #fff;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px #f0f1f2;
+  padding: 0 24px 0 24px;
+}
+</style>
diff --git a/src/views/dms/aiKnowledge/knowledgeContent.vue b/src/views/dms/aiKnowledge/knowledgeContent.vue
new file mode 100644
index 0000000..c67b897
--- /dev/null
+++ b/src/views/dms/aiKnowledge/knowledgeContent.vue
@@ -0,0 +1,496 @@
+<template>
+  <div class="kb-docs-page">
+    <div class="kb-docs-header">
+      <span><b>AI知识库：</b>{{ knowledgeBaseName}}</span>
+      <el-button type="primary" @click="showUploadDialog = true" style="margin-right:auto; margin-left:20px;" >上传文档</el-button>
+    </div>
+    <el-row :gutter="20" v-loading="loading">
+      <el-col v-for="doc in aiKnowledgeContentList" :key="doc.knowledgeContentId" :xs="24" :sm="12" :md="8" :lg="8"
+              :xl="6" style="margin-bottom:20px;">
+        <div :class="['doc-card', getStatusClass(doc)]" @click.self="goPreview(doc)">
+          <!-- 右上角状态 -->
+          <div class="doc-card-status-top" :class="getStatusClass(doc)">
+            {{ getStatusText(doc) }}
+          </div>
+
+          <div class="doc-card-title">
+            <span :class="['file-icon', getFileIconClass(doc)]"/>
+            <span class="title-text" :title="doc.fileName">{{ doc.fileName }}</span>
+          </div>
+
+          <!-- 左下角上传信息 -->
+          <div class="doc-card-upload-info">
+            <div class="upload-time">{{ doc.updateTime || doc.createTime }}</div>
+            <!--            <div class="upload-user">{{ doc.createBy || doc.updateBy || '未知用户' }}</div>-->
+          </div>
+
+          <div class="doc-card-footer">
+            <div class="doc-card-actions">
+              <el-button size="small" type="primary" v-if="Number(doc.contentStatus) !== 1"
+                         @click.stop="vectorizeDoc(doc)">向量化
+              </el-button>
+              <el-button size="small" type="danger" @click.stop="handleDelete(doc)">删除</el-button>
+            </div>
+          </div>
+        </div>
+      </el-col>
+    </el-row>
+    <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
+                v-model:limit="queryParams.pageSize" @pagination="getList"/>
+
+
+    <el-dialog v-model="showEditDialog" title="编辑文档" width="500px">
+      <el-input v-model="editDocForm.title" placeholder="标题" style="margin-bottom:12px;"/>
+      <el-input v-model="editDocForm.content" type="textarea" :rows="4" placeholder="内容"/>
+      <div style="margin-top:12px;text-align:right;">
+        <el-button @click="showEditDialog=false">取消</el-button>
+        <el-button type="primary" @click="saveEditDoc">保存</el-button>
+      </div>
+    </el-dialog>
+    <el-dialog v-model="showUploadDialog" title="上传文档" width="80vw" :modal-append-to-body="false"
+               :close-on-click-modal="false" :destroy-on-close="true" :before-close="onUploadDialogClose">
+      <KnowledgeBaseUpload @confirm="onUploadSuccess" @cancel="onUploadDialogClose"/>
+    </el-dialog>
+    <el-dialog v-model="showPreviewDialog" title="文档预览" width="80vw" height="90vw" :modal-append-to-body="false"
+               :close-on-click-modal="false" :destroy-on-close="true">
+      <KnowledgeBasePreview :doc="previewDoc"/>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {ref} from 'vue'
+import {useRouter} from 'vue-router'
+import KnowledgeBaseUpload from './knowledgeContentUpload.vue'
+import KnowledgeBasePreview from './knowledgeContentPreview.vue'
+import {
+  listAiKnowledgeContent,
+  vectorizeKnowledgeContent,
+  delAiKnowledgeContent,
+  delAiKnowledgeBase
+} from '@/api/ai/skill/aiKnowledgeBase';
+import {
+  AiKnowledgeContentVO,
+  AiKnowledgeContentQuery,
+  AiKnowledgeContentForm
+} from '@/api/ai/skill/aiKnowledgeContent/types';
+import {ElMessage} from 'element-plus'
+import {AiKnowledgeBaseVO} from "@/api/ai/skill/aiKnowledgeBase/types";
+
+const {proxy} = getCurrentInstance() as ComponentInternalInstance;
+
+const knowledgeBaseId = ref();
+const knowledgeBaseName = ref();
+const modelId = ref();
+const embeddingKnowledgeContentVo = ref({});
+
+const page = ref(1)
+const pageSize = 6
+const showEditDialog = ref(false)
+const showUploadDialog = ref(false)
+const editDocForm = ref({id: 0, title: '', content: '', status: 'enabled'})
+const docList = ref([
+  {
+    id: 1,
+    title: '文档A',
+    content: '内容A第一行，内容A第二行，内容A第三行，内容A第四行，内容A第五行，内容A第六行，内容A第七行，内容A第八行，内容A第九行。',
+    status: 'enabled'
+  },
+  {
+    id: 2,
+    title: '文档B',
+    content: '内容B第一行，内容B第二行，内容B第三行，内容B第四行，内容B第五行，内容B第六行，内容B第七行，内容B第八行，内容B第九行。',
+    status: 'disabled'
+  },
+  {
+    id: 3,
+    title: '文档C',
+    content: '内容C第一行，内容C第二行，内容C第三行，内容C第四行，内容C第五行，内容C第六行，内容C第七行，内容C第八行，内容C第九行。',
+    status: 'enabled'
+  },
+  // ...更多模拟数据
+])
+
+
+const aiKnowledgeContentList = ref<AiKnowledgeContentVO[]>([]);
+const total = ref(0);
+const loading = ref(true);
+
+const initFormData: AiKnowledgeContentForm = {
+  knowledgeContentId: undefined,
+  knowledgeBaseId: undefined,
+  contentTitle: undefined,
+  contentWay: undefined,
+  description: undefined,
+  fileName: undefined,
+  filePath: undefined,
+  fileType: undefined,
+  fileSize: undefined,
+  contentStatus: undefined,
+  overlapCharacter: undefined,
+  totalChunk: undefined,
+  createTime: undefined,
+  updateTime: undefined,
+  createBy: undefined,
+  updateBy: undefined,
+}
+const data = reactive<PageData<AiKnowledgeContentForm, AiKnowledgeContentQuery>>({
+  form: {...initFormData},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    knowledgeContentId: undefined,
+    knowledgeBaseId: undefined,
+    contentTitle: undefined,
+    contentWay: undefined,
+    description: undefined,
+    fileName: undefined,
+    filePath: undefined,
+    fileType: undefined,
+    fileSize: undefined,
+    contentStatus: undefined,
+    overlapCharacter: undefined,
+    totalChunk: undefined,
+    params: {}
+  },
+  rules: {
+    knowledgeContentId: [
+      {required: true, message: "主键不能为空", trigger: "blur"}
+    ],
+
+  }
+});
+
+const {queryParams, form, rules} = toRefs(data);
+
+/** 查询AI知识库内容列表 */
+const getList = async () => {
+  loading.value = true;
+  const res = await listAiKnowledgeContent(queryParams.value);
+  aiKnowledgeContentList.value = res.rows;
+  total.value = res.total;
+  loading.value = false;
+  if (!aiKnowledgeContentList.value || aiKnowledgeContentList.value.length <= 0) {
+    proxy.$modal.msgWarning('未查询到数据')
+  }
+}
+
+// 根据文件名或fileType返回图标class
+function getFileIconClass(doc: any) {
+  // alert(JSON.stringify(doc))
+  const name: string = doc.fileName || doc.contentTitle || ''
+  const type: string = (doc.fileType || '').toString().toLowerCase()
+  const ext = (name.split('.').pop() || '').toLowerCase()
+  const t = type || ext
+  if ([
+    'doc', 'docx', 'application/msword', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
+  ].includes(t)) return 'icon-word'
+  if ([
+    'pdf', 'application/pdf'
+  ].includes(t)) return 'icon-pdf'
+  if ([
+    'xls', 'xlsx', 'application/vnd.ms-excel', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
+  ].includes(t)) return 'icon-excel'
+  if ([
+    'ppt', 'pptx', 'application/vnd.ms-powerpoint', 'application/vnd.openxmlformats-officedocument.presentationml.presentation'
+  ].includes(t)) return 'icon-ppt'
+  if ([
+    'txt', 'text/plain', 'md', 'markdown'
+  ].includes(t)) return 'icon-txt'
+  return 'icon-file'
+}
+
+function getStatusText(doc: any) {
+  const v = Number(doc.contentStatus)
+  if (v === 1) return '成功'
+  if (v === 2) return '解析失败'
+  if (v === 3) return '待解析'
+  return '失败'
+}
+
+function getStatusClass(doc: any) {
+  const v = Number(doc.contentStatus)
+  if (v === 1) return 'enabled'
+  if (v === 0) return 'pending'
+  return 'disabled'
+}
+
+async function vectorizeDoc(doc) {
+  try {
+    proxy?.$modal.loading('正在向量化文档，请稍候...')
+
+    // 如果有可用的向量化参数，则调用后端处理（可选）
+    embeddingKnowledgeContentVo.value.knowledgeContentId = doc.knowledgeContentId
+    embeddingKnowledgeContentVo.value.knowledgeBaseId = knowledgeBaseId.value
+    embeddingKnowledgeContentVo.value.modelId = modelId.value
+    await vectorizeKnowledgeContent(embeddingKnowledgeContentVo.value)
+    ElMessage.success('向量化完成')
+    doc.contentStatus = 1
+
+  } catch (err) {
+    console.error(err)
+  } finally {
+    proxy?.$modal.closeLoading()
+  }
+}
+
+function formatTime(timestamp: string | number) {
+  if (!timestamp) return '未知时间';
+  const date = new Date(timestamp);
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, '0');
+  const day = String(date.getDate()).padStart(2, '0');
+  const hours = String(date.getHours()).padStart(2, '0');
+  const minutes = String(date.getMinutes()).padStart(2, '0');
+  return `${year}-${month}-${day} ${hours}:${minutes}`;
+}
+
+
+const pagedList = computed(() => {
+  const start = (page.value - 1) * pageSize
+  return docList.value.slice(start, start + pageSize)
+})
+
+const showPreviewDialog = ref(false)
+const previewDoc = ref(null)
+
+function goPreview(doc: any) {
+  previewDoc.value = doc
+  showPreviewDialog.value = true
+}
+
+function editDoc(doc: any) {
+  editDocForm.value = {...doc}
+  showEditDialog.value = true
+}
+
+function saveEditDoc() {
+  // TODO: 保存编辑逻辑
+  const idx = docList.value.findIndex(d => d.id === editDocForm.value.id)
+  if (idx !== -1) docList.value[idx] = {...editDocForm.value}
+  showEditDialog.value = false
+}
+
+
+const handleDelete = async (row?: AiKnowledgeContentVO) => {
+  const knowledgeBaseId = row?.knowledgeBaseId;
+  await proxy?.$modal.confirm('是否确认删除知识库内容["' + row.fileName + '"]的数据项？').finally(() => loading.value = false);
+  await delAiKnowledgeContent(knowledgeBaseId, row.knowledgeContentId);
+  proxy?.$modal.msgSuccess("删除成功");
+  await getList();
+}
+
+function handleFileChange(file) {
+  // TODO: 处理文件选择
+}
+
+function confirmUpload() {
+  // TODO: 上传逻辑
+  showUploadDialog.value = false
+}
+
+function onUploadSuccess() {
+  showUploadDialog.value = false
+  // 可选：刷新文档列表
+}
+
+function onUploadDialogClose() {
+  showUploadDialog.value = false
+  getList();
+}
+
+onMounted(() => {
+  let paramKnowledgeBaseId = proxy.$route.params?.knowledgeBaseId
+  let paramModelId = proxy.$route.params?.modelId
+  if (paramModelId === undefined || paramKnowledgeBaseId === undefined) {
+    proxy?.$modal.msgWarning("请选择知识库和模型");
+    return;
+  }
+
+  knowledgeBaseId.value = paramKnowledgeBaseId
+  queryParams.value.knowledgeBaseId = paramKnowledgeBaseId
+  modelId.value = paramModelId;
+  knowledgeBaseName.value = decodeURIComponent(proxy.$route.params?.knowledgeBaseName)
+  getList();
+});
+
+</script>
+
+<style scoped>
+.kb-docs-page {
+  padding: 24px;
+  height: 100%;
+}
+
+.kb-docs-header {
+  display: flex;
+  justify-content: flex-start;
+  margin-bottom: 24px;
+}
+
+.doc-card {
+  background: #fff;
+  border-radius: 10px;
+  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
+  padding: 16px 16px 48px 16px;
+  cursor: pointer;
+  position: relative;
+  transition: box-shadow .2s, transform .2s;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  height: 160px;
+}
+
+.doc-card:hover {
+  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.10);
+  transform: translateY(-2px);
+}
+
+.doc-card-title {
+  font-size: 18px;
+  font-weight: 600;
+  margin-bottom: 0;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.title-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* 隐藏内容区（仅标题卡片） */
+.doc-card-content {
+  display: none;
+}
+
+.doc-card-footer {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  position: absolute;
+  bottom: 12px;
+  left: 16px;
+  right: 16px;
+}
+
+.doc-card-status {
+  margin-right: auto;
+  font-size: 16px;
+  font-weight: 600;
+  color: #909399;
+}
+
+.doc-card-status.enabled {
+  color: #67c23a;
+}
+
+.doc-card-status.pending {
+  color: #e6a23c;
+}
+
+.doc-card-status.disabled {
+  color: #f56c6c;
+}
+
+.doc-card.enabled {
+  background: #f6ffed;
+}
+
+.doc-card.disabled {
+  background: #fff1f0;
+}
+
+.doc-card-actions {
+  display: flex;
+  gap: 8px;
+  justify-content: flex-end;
+  align-items: center;
+}
+
+.doc-card-status-top {
+  position: absolute;
+  top: 12px;
+  right: 16px;
+  font-size: 14px;
+  font-weight: 600;
+  color: #fff;
+  padding: 4px 8px;
+  border-radius: 6px;
+  background-color: #409eff; /* 默认蓝色 */
+}
+
+.doc-card-status-top.enabled {
+  background-color: #67c23a;
+}
+
+.doc-card-status-top.pending {
+  background-color: #e6a23c;
+}
+
+.doc-card-status-top.disabled {
+  background-color: #f56c6c;
+}
+
+.doc-card-upload-info {
+  position: absolute;
+  bottom: 12px;
+  left: 16px;
+  font-size: 12px;
+  color: #909399;
+  line-height: 1.4;
+}
+
+.upload-time {
+  margin-bottom: 2px;
+  font-weight: 500;
+  color: #606266;
+  font-size: 14px;
+}
+
+.upload-user {
+  opacity: 0.8;
+  color: #909399;
+}
+
+/* 文件类型图标 */
+.file-icon {
+  width: 50px;
+  height: 50px;
+  border-radius: 4px;
+  display: inline-block;
+}
+
+.icon-word {
+  background-image: url('@/assets/docx.png');
+  background-size: 50px 50px;
+}
+
+.icon-pdf {
+  background-image: url('@/assets/PDF.png');
+  background-size: 50px 50px;
+}
+
+.icon-excel {
+  background-image: url('@/assets/docx.png');
+  background-size: 50px 50px;
+}
+
+.icon-ppt {
+  background-image: url('@/assets/docx.png');
+  background-size: 50px 50px;
+}
+
+.icon-txt {
+  background-image: url('@/assets/docx.png');
+  background-size: 50px 50px;
+}
+
+.icon-file {
+  background-image: url('@/assets/document.png');
+  background-size: 50px 50px;
+}
+</style>
diff --git a/src/views/dms/aiKnowledge/knowledgeContentPreview.vue b/src/views/dms/aiKnowledge/knowledgeContentPreview.vue
new file mode 100644
index 0000000..bdb94c8
--- /dev/null
+++ b/src/views/dms/aiKnowledge/knowledgeContentPreview.vue
@@ -0,0 +1,319 @@
+<template>
+  <div class="kb-preview-page">
+    <div class="kb-preview-container" v-loading="loading">
+      <div class="kb-preview-left" :style="leftPaneStyle" :class="{ collapsed: !showSegments }">
+        <div class="kb-preview-title-row">
+          <span v-if="showSegments">文档信息</span>
+          <el-button type="text" @click="toggleLeftPane" style="margin-left:auto;">
+            <el-icon v-if="!showSegments"><ArrowRight /></el-icon>
+            <el-icon v-else><ArrowLeft /></el-icon>
+          </el-button>
+        </div>
+        <div class="kb-preview-basic">
+          <div><b>名称：</b>{{ props.doc.fileName }}</div>
+          <div><b>附件：</b> <el-button type="text" @click.stop="downloadAttachment(props.doc.filePath)">下载</el-button></div>
+          <ul class="kb-preview-attachments">
+            <!--            <li>-->
+            <!--              <span>{{ props.doc.filePath }}</span>-->
+
+            <!--            </li>-->
+          </ul>
+        </div>
+        <!--        <div class="kb-preview-detail">-->
+        <!--          <div><b>详细内容：</b></div>-->
+        <!--          <div class="kb-preview-content">{{ doc.content }}</div>-->
+        <!--        </div>-->
+      </div>
+      <div class="kb-preview-drag" v-if="showSegments" @mousedown="startDrag"></div>
+      <div class="kb-preview-right">
+        <div class="kb-preview-title kb-preview-title-row">
+          <span>内容分段</span>
+          <span class="kb-preview-segment-count">共{{ props.doc.chunkList?.length }}段</span>
+        </div>
+        <div class="kb-segments-flow">
+          <div class="kb-segment-flow-row" v-for="(seg, idx) in props.doc.chunkList" :key="idx">
+            <div class="kb-segment-flow-left">
+              <div v-if="idx < props.doc.chunkList?.length - 1" class="kb-segment-flow-line"></div>
+              <div class="kb-segment-flow-circle">{{ idx + 1 }}</div>
+            </div>
+            <div class="kb-segment-content">{{ seg }}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onBeforeUnmount } from 'vue'
+import { useRoute } from 'vue-router'
+import { ArrowRight, ArrowLeft } from '@element-plus/icons-vue'
+import {
+  getKnowledgeContentFragmentList,
+} from "@/api/ai/skill/aiKnowledgeBase";
+
+const {proxy} = getCurrentInstance() as ComponentInternalInstance;
+
+const route = useRoute()
+const leftWidth = ref(400)
+const dragging = ref(false)
+const props = defineProps({
+  doc: {
+    type: [Object],
+    required: true
+  },
+});
+const loading = ref(false);
+
+const doc = ref({
+  id: 1,
+  title: '文档A',
+  content: '这是文档A的全部内容。分段1内容。分段2内容。分段3内容。',
+  status: 'enabled',
+  attachments: [
+    { name: '附件1.pdf', url: '/download/1' }
+  ]
+})
+const segments = ref([
+  '分段1内容',
+  '分段2内容\n第二行内容\n第三行内容\n第四行内容',
+  '分段3内容'
+])
+
+
+const showSegments = ref(true)
+const leftPaneStyle = computed(() => showSegments.value
+  ? { width: leftWidth.value + 'px', minWidth: '200px', maxWidth: '800px' }
+  : { width: '20px', minWidth: '10px', maxWidth: '120px', overflow: 'hidden' })
+
+// 添加切换左边面板的函数
+function toggleLeftPane() {
+  showSegments.value = !showSegments.value
+}
+
+function startDrag(e: MouseEvent) {
+  dragging.value = true
+  const startX = e.clientX
+  const startWidth = leftWidth.value
+  function onMouseMove(ev: MouseEvent) {
+    if (!dragging.value) return
+    const delta = ev.clientX - startX
+    leftWidth.value = Math.max(200, Math.min(600, startWidth + delta))
+  }
+  function onMouseUp() {
+    dragging.value = false
+    window.removeEventListener('mousemove', onMouseMove)
+    window.removeEventListener('mouseup', onMouseUp)
+  }
+  window.addEventListener('mousemove', onMouseMove)
+  window.addEventListener('mouseup', onMouseUp)
+}
+
+function downloadAttachment(url) {
+  window.open(url, '_blank')
+}
+
+onBeforeUnmount(() => {
+  window.removeEventListener('mousemove', () => {})
+  window.removeEventListener('mouseup', () => {})
+})
+
+
+/** 查询AI知识库列表 */
+const getChunkList = async () => {
+  loading.value = true;
+  const res = await getKnowledgeContentFragmentList({contentId:props.doc.knowledgeContentId});
+  // alert(JSON.stringify(res))
+  props.doc.chunkList = [];
+  res.data.forEach(fragment => {
+    props.doc.chunkList.push(fragment.fragmentText);
+  })
+  loading.value = false;
+}
+
+
+onMounted(() => {
+  // alert(JSON.stringify(props.doc))
+  let paramKnowledgeContentId =props.doc.knowledgeContentId
+  if(!props.doc.chunkList || props.doc.chunkList.length == 0){
+    getChunkList();
+  }else{
+
+  }
+
+});
+
+</script>
+
+<style scoped>
+.kb-preview-page {
+  padding: 0;
+}
+.kb-preview-container {
+  display: flex;
+  background: #fff;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px #f0f1f2;
+  height:100%;
+  overflow: hidden;
+}
+.kb-preview-left {
+  padding: 24px;
+  border-right: 2px solid #f0f1f2;
+  background: #fafbfc;
+  min-width: 200px;
+  max-width: 800px;
+  transition: all 0.3s ease; /* 添加平滑过渡效果 */
+  box-sizing: border-box;
+  overflow: hidden; /* 防止内容溢出 */
+}
+
+/* 收缩状态下的样式 */
+.kb-preview-left.collapsed .kb-preview-basic,
+.kb-preview-left.collapsed .kb-preview-detail {
+  display: none;
+}
+.kb-preview-drag {
+  width: 6px;
+  cursor: ew-resize;
+  background: #e4e7ed;
+  transition: background 0.2s;
+}
+.kb-preview-drag:hover {
+  background: #b3c0d1;
+}
+.kb-preview-right {
+  flex: 1;
+  padding: 24px;
+  overflow: auto;
+  min-width: 0; /* 确保flex子项能正确收缩 */
+}
+.kb-preview-title {
+  font-size: 18px;
+  font-weight: bold;
+  margin-bottom: 16px;
+}
+.kb-preview-info {
+  font-size: 15px;
+  color: #333;
+}
+.kb-preview-content {
+  margin-top: 8px;
+  color: #666;
+  word-break: break-all;
+}
+.kb-segment-content {
+  background: #f5f7fa;
+  border-radius: 4px;
+  padding: 10px 16px;
+  color: #333;
+  width: 100%;
+  height: auto; /* 改为auto，让高度自适应内容 */
+  min-height: 48px; /* 设置最小高度，与圆圈高度一致 */
+  box-sizing: border-box;
+  font-size: 15px;
+  line-height: 1.7;
+  word-break: break-all;
+  white-space: normal;
+  cursor: pointer;
+  flex: 1; /* 让内容区域占据剩余空间 */
+  display: flex;
+  align-items: center; /* 垂直居中内容 */
+}
+.kb-segment-ellipsis {
+  display: -webkit-box;
+  -webkit-line-clamp: 4;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  word-break: break-all;
+  white-space: normal;
+  cursor: pointer;
+}
+.kb-preview-attachments {
+  margin: 0 0 8px 0;
+  padding: 0;
+  list-style: none;
+}
+.kb-preview-attachments li {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 4px;
+}
+.kb-preview-title-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-size: 18px;
+  font-weight: bold;
+  margin-bottom: 16px;
+}
+.kb-preview-segment-count {
+  font-size: 18px;
+  color: #888;
+  font-weight: normal;
+  margin-bottom: 0;
+}
+.kb-segments-flow {
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+  margin-top: 8px;
+}
+.kb-segment-flow-row {
+  display: flex;
+  align-items: stretch;
+  gap: 20px;
+  position: relative;
+  min-height: auto; /* 改为auto，让高度自适应 */
+}
+.kb-segment-flow-left {
+  position: relative;
+  min-width: 56px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  height: 100%; /* 保持100%以填充整个行高度 */
+}
+.kb-segment-flow-circle {
+  width: 48px;
+  height: 48px;
+  background: #fff;
+  border: 4px solid #409EFF;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 22px;
+  color: #409EFF;
+  font-weight: bold;
+  box-sizing: border-box;
+  box-shadow: 0 2px 12px #e0eaff33;
+  z-index: 1;
+  position: relative;
+  flex-shrink: 0; /* 防止圆圈被压缩 */
+}
+.kb-segment-flow-line {
+  position: absolute;
+  top: 48px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 4px;
+  height: calc(100% - 48px); /* 从圆圈底部开始，到行底部结束 */
+  background: #409EFF33;
+  border-radius: 2px;
+  z-index: 0;
+}
+.kb-segment-flow-row:last-child .kb-segment-flow-line {
+  display: none;
+}
+.kb-preview-basic {
+  margin-bottom: 24px;
+  font-size: 18px;
+}
+.kb-preview-detail {
+  margin-top: 16px;
+}
+</style>
diff --git a/src/views/dms/aiKnowledge/knowledgeContentUpload.vue b/src/views/dms/aiKnowledge/knowledgeContentUpload.vue
new file mode 100644
index 0000000..d827418
--- /dev/null
+++ b/src/views/dms/aiKnowledge/knowledgeContentUpload.vue
@@ -0,0 +1,436 @@
+<template>
+  <div class="kb-upload-page">
+    <div class="kb-upload-steps-bar">
+      <el-steps :active="step" finish-status="success" process-status="finish" align-center>
+        <el-step title="上传文档"/>
+        <el-step title="预览文档"/>
+        <!--        <el-step title="文档预览" />-->
+      </el-steps>
+    </div>
+    <div v-if="step === 0" class="kb-upload-step1">
+      <el-form :model="form" ref="formRef" label-width="100px" class="kb-upload-form">
+        <!--        <el-form-item label="标题" prop="title">-->
+        <!--          <el-input v-model="form.title" placeholder="请输入文档标题" style="width:90%" />-->
+        <!--        </el-form-item>-->
+
+        <el-form-item label="上传文档" prop="file">
+          <el-upload
+            single
+            drag
+            style="width:80%"
+            :action="uploadImgUrl"
+            :data="form"
+            :before-upload="beforeUpload"
+            :on-success="handleUploadSuccess"
+            :on-error="handleUploadError"
+            :limit="limit"
+            ref="fileUploadRef"
+            :show-file-list="true"
+            :headers="headers"
+            :file-list="fileList"
+            :before-remove="beforeRemove"
+          >
+            <i class="el-icon-upload"></i>
+            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+            <div class="el-upload__tip" slot="tip">只能上传一个文档，支持<b style="color:#f56c6c">PDF、Word</b>等格式，最大<b
+              style="color:#f56c6c">10MB</b></div>
+          </el-upload>
+        </el-form-item>
+      </el-form>
+      <div style="text-align:right;margin-top:24px;">
+        <el-button @click="onCancel">取消</el-button>
+        <el-button type="primary" @click="onNext" :loading="isProcessing" :disabled="isProcessing">下一步</el-button>
+      </div>
+    </div>
+    <div v-else class="kb-upload-step2">
+      <KnowledgeContentPreview :doc="previewDoc"/>
+      <div style="text-align:right;margin-top:24px;">
+        <el-button type="primary" @click="onCancel">关闭</el-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {ref, watch} from 'vue'
+import {ElMessage} from 'element-plus'
+import KnowledgeContentPreview from './knowledgeContentPreview.vue'
+import useUserStore from "@/store/modules/user";
+import {UploadRawFile} from 'element-plus';
+import {
+  vectorizeKnowledgeContent,
+  removeContentFile,
+} from "@/api/ai/skill/aiKnowledgeBase";
+import {getToken} from "@/utils/auth";
+
+const step = ref(0)
+const formRef = ref()
+const form = ref({title: '', file: null, knowledgeBaseId: null, modelId: null})
+const fileList = ref([])
+
+const fileUploadRef = ref<ElUploadInstance>();
+
+const number = ref(0)
+const uploadList = ref([])
+const dialogImageUrl = ref("")
+const dialogVisible = ref(false)
+const limit = ref(1)
+const hideUpload = ref(false)
+const baseUrl = import.meta.env.VITE_APP_BASE_API;
+const uploadImgUrl = ref(baseUrl + "/ai/aiKnowledgeBase/uploadKnowledgeContent") // 上传的图片服务器地址
+const headers = ref({
+  Authorization: "Bearer " + getToken(),
+  clientid: import.meta.env.VITE_APP_CLIENT_ID
+})
+
+const embeddingKnowledgeContentVo = ref({});
+const emit = defineEmits<{
+  (e: 'cancel'): void
+  (e: 'confirm', payload?: any): void
+}>()
+
+
+const segments = ref([
+  '分段1内容',
+  '分段2内容',
+  '分段3内容'
+])
+
+interface Options {
+  file: '';
+  fileName: string;
+  previews: any; // 预览数据
+  outputType: string;
+  visible: boolean;
+}
+
+const {proxy} = getCurrentInstance() as ComponentInternalInstance;
+
+const cropper = ref<any>({});
+//图片裁剪数据
+const options = reactive<Options>({
+  file: '',
+  outputType: 'png',
+  fileName: '',
+  previews: {},
+  visible: false
+});
+
+
+/** 上传预处理 */
+const beforeUpload = (file: UploadRawFile): any => {
+  // 校检文件类型
+  // if (props.fileType.length) {
+  //   const fileName = file.name.split('.');
+  //   const fileExt = fileName[fileName.length - 1];
+  //   const isTypeOk = props.fileType.indexOf(fileExt) >= 0;
+  //   if (!isTypeOk) {
+  //     proxy?.$modal.msgError(`文件格式不正确, 请上传${props.fileType.join('/')}格式文件!`);
+  //     return false;
+  //   }
+  // }
+  // 校检文件大小
+  // if (props.fileSize) {
+  //   const isLt = file.size / 1024 / 1024 < props.fileSize;
+  //   if (!isLt) {
+  //     proxy?.$modal.msgError(`上传文件大小不能超过 ${props.fileSize} MB!`);
+  //     return false;
+  //   }
+  // }
+  if (fileList.value.length >= limit.value) {
+    proxy?.$modal.msgError(`最多上传${limit.value}个文件`);
+    return false;
+  }
+
+  proxy?.$modal.loading('正在上传文件，请稍候...');
+  number.value++;
+  return true;
+};
+
+// 上传成功回调
+const handleUploadSuccess = (res: any, file, fileList) => {
+  console.log('上传成功:', res)
+  if (res.code === 200) {
+    embeddingKnowledgeContentVo.value = res.data
+    embeddingKnowledgeContentVo.value.knowledgeBaseId = form.value.knowledgeBaseId;
+    embeddingKnowledgeContentVo.value.modelId = form.value.modelId;
+    uploadList.value.push({
+      name: res.data.fileName,
+      url: res.data.url,
+      knowledgeContentId: res.data.knowledgeContentId
+    });
+    uploadedSuccessfully();
+  } else {
+    number.value--;
+    proxy?.$modal.closeLoading();
+    proxy?.$modal.msgError(res.msg);
+    fileUploadRef.value?.handleRemove(file);
+    uploadedSuccessfully();
+  }
+}
+
+// 上传结束处理
+const uploadedSuccessfully = () => {
+  if (number.value > 0 && uploadList.value.length === number.value) {
+    fileList.value = fileList.value.filter((f) => f.url !== undefined).concat(uploadList.value);
+    uploadList.value = [];
+    number.value = 0;
+    // emit('update:modelValue', listToString(fileList.value));
+    // emit('update:modelValue', fileList.value);
+    proxy?.$modal.closeLoading();
+  }
+};
+
+/** 删除预处理 */
+const beforeRemove =  (file: UploadRawFile) => {
+  let knowledgeContentId = file.knowledgeContentId;
+  return new Promise((resolve, reject) => {
+    // 模拟确认对话框
+    ElMessageBox.confirm(
+      `确定删除 ${file.name} ？`,
+      '警告',
+      {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning',
+      }
+    ).then(() => {
+      // 模拟API调用
+      removeContentFile(knowledgeContentId)
+        .then(() => {
+          resolve(true); // 允许删除
+        })
+        .catch(() => {
+          resolve(false); // 阻止删除
+        });
+    }).catch(() => {
+      // 用户点击取消，阻止删除
+      resolve(false);
+    });
+  });
+}
+
+
+// 删除文件
+const handleDelete = (index: number) => {
+  let ossId = fileList.value[index].ossId;
+  // delOss(ossId);
+  fileList.value.splice(index, 1);
+  // emit('update:modelValue', listToString(fileList.value));
+};
+
+
+// 上传失败回调
+const handleUploadError = (error: any) => {
+  console.error('上传失败:', error)
+
+  // 添加到上传记录
+  const record = {
+    fileName: '上传失败',
+    fileSize: '未知',
+    uploadTime: new Date().toLocaleString(),
+    status: 'error'
+  }
+  // uploadRecords.value.unshift(record)
+
+  ElMessage.error('文件上传失败')
+}
+
+
+const previewDoc = ref(null)
+
+function handleFileChange(file) {
+  form.value.file = file.raw
+  fileList.value = [file]
+}
+
+const isProcessing = ref(false)
+
+function onNext() {
+  // if (!form.value.title) return ElMessage.warning('请输入文档标题')
+  if (fileList.value.length === 0) return ElMessage.warning('请上传文档')
+  // 实际应上传并解析文档，获取分段内容
+  // step.value = 1
+  processNext();
+}
+
+async function processNext() {
+  try {
+    isProcessing.value = true
+    proxy?.$modal.loading('正在向量化文档，请稍候...')
+
+    // 如果有可用的向量化参数，则调用后端处理（可选）
+    if (embeddingKnowledgeContentVo.value && Object.keys(embeddingKnowledgeContentVo.value).length > 0) {
+      await vectorizeKnowledgeContent(embeddingKnowledgeContentVo.value)
+      previewDoc.value = embeddingKnowledgeContentVo.value
+      step.value = 1
+      ElMessage.success('向量化完成')
+    } else {
+      ElMessage.error('处理失败，请重试')
+    }
+
+  } catch (err) {
+    console.error(err)
+  } finally {
+    proxy?.$modal.closeLoading()
+    isProcessing.value = false
+  }
+}
+
+function onCancel() {
+  // TODO: 返回或关闭页面
+  ElMessage.info('已取消')
+  emit('cancel')
+}
+
+function onConfirm() {
+}
+
+
+watch([() => form.value.title, segments], () => {
+  previewDoc.value.title = form.value.title
+  previewDoc.value.segments = segments.value
+})
+
+
+onMounted(() => {
+  let paramKnowledgeBaseId = proxy.$route.params?.knowledgeBaseId
+  form.value.knowledgeBaseId = paramKnowledgeBaseId;
+  let paramModelId = proxy.$route.params?.modelId;
+  form.value.modelId = paramModelId;
+});
+
+</script>
+
+<style>
+.kb-upload-page {
+  height: 90%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+}
+
+.kb-upload-step1 {
+  padding: 32px 24px 0 24px;
+  width: 100%;
+  height: 80%;
+  margin: 0 auto;
+}
+
+.kb-upload-form {
+  padding: 32px 24px 0 24px;
+  width: 70%;
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+.kb-upload-form .el-form-item__content {
+  width: 100%;
+}
+
+.kb-upload-form .el-input {
+  width: 100%;
+}
+
+.kb-upload-form .el-upload {
+  width: 100%;
+}
+
+.kb-upload-preview-title {
+  font-size: 18px;
+  font-weight: bold;
+  margin-bottom: 16px;
+}
+
+.kb-upload-segment-content {
+  background: #f5f7fa;
+  border-radius: 4px;
+  padding: 10px 16px;
+  color: #333;
+  margin-bottom: 8px;
+}
+
+.kb-upload-steps-bar {
+  background: #f5f7fa;
+  padding: 32px 0 24px 0;
+  margin-bottom: 32px;
+  border-radius: 8px 8px 0 0;
+  box-shadow: 0 2px 8px #f0f1f2;
+}
+
+.kb-upload-steps-bar .el-steps {
+  max-width: 520px;
+  margin: 0 auto;
+}
+
+.kb-upload-steps-bar .el-step__icon {
+  width: 120px !important;
+  height: 120px !important;
+  font-size: 40px !important;
+  border-width: 10px !important;
+
+}
+
+.kb-upload-steps-bar .el-step.is-process .el-step__icon,
+.kb-upload-steps-bar .el-step.is-success .el-step__icon {
+  border-color: #409EFF !important;
+  border-width: 10px !important;
+  background: #409EFF !important;
+  color: #fff !important;
+  box-shadow: 0 0 16px #409EFF55;
+}
+
+.kb-upload-steps-bar .el-step__title {
+  font-size: 22px;
+  font-weight: bold;
+}
+
+.kb-upload-steps-bar .el-step.is-process .el-step__title,
+.kb-upload-steps-bar .el-step.is-success .el-step__title {
+  color: #409EFF !important;
+  font-weight: bold;
+}
+
+.kb-upload-steps-bar .el-step__line {
+  margin-top: 50px;
+  height: 10px !important;
+  border-radius: 3px;
+}
+
+.kb-upload-steps-bar .el-step.is-success .el-step__line {
+  background: #409EFF !important;
+}
+
+.kb-upload-steps-bar .el-step.is-process .el-step__line {
+  background: #409EFF !important;
+}
+
+.kb-upload-steps-bar .el-step.is-wait .el-step__icon {
+  border-color: #e0e0e0 !important;
+  border-width: 3px !important;
+  background: #f0f1f2 !important;
+  color: #bbb !important;
+}
+
+.kb-upload-steps-bar .el-step.is-wait .el-step__line {
+  background: #e0e0e0 !important;
+}
+
+.kb-upload-steps-bar .el-step.is-success .el-step__icon {
+  background: #409EFF !important; /* 你想要的蓝色 */
+  border-color: #409EFF !important;
+  color: #fff !important;
+}
+
+.kb-upload-step2 {
+  width: 100%;
+  height: 100%;
+}
+
+.el-dialog__body {
+  height: 100% !important;
+  min-height: 100% !important;
+  padding: 0;
+}
+</style>