7
This commit is contained in:
+320
-151
@@ -7,6 +7,14 @@ import apiClient from '@/api/client'
|
||||
const route = useRoute()
|
||||
const kbId = route.params.id as string
|
||||
|
||||
const isMobile = ref(window.innerWidth <= 768)
|
||||
const showMobileSidebar = ref(false)
|
||||
|
||||
window.addEventListener('resize', () => {
|
||||
isMobile.value = window.innerWidth <= 768
|
||||
if (!isMobile.value) showMobileSidebar.value = false
|
||||
})
|
||||
|
||||
const kb = ref<any>(null)
|
||||
const docs = ref<any[]>([])
|
||||
const categories = ref<any[]>([])
|
||||
@@ -247,159 +255,160 @@ function getCategoryName(catId: string) {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-if="kb" style="display: flex; gap: 24px; height: calc(100vh - 120px)">
|
||||
<!-- 左侧：目录树 -->
|
||||
<div style="width: 300px; flex-shrink: 0; overflow-y: auto; border-right: 1px solid #e4e7ed; padding-right: 20px">
|
||||
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px">
|
||||
<h3 style="margin: 0; font-size: 16px">📁 目录结构</h3>
|
||||
<el-button size="small" type="primary" @click="openAddCategory(null)">+ 新建</el-button>
|
||||
<div v-if="kb">
|
||||
<!-- 手机端：顶部操作栏 -->
|
||||
<div class="mobile-header">
|
||||
<h1 style="margin: 0; font-size: 20px">{{ kb.name }}</h1>
|
||||
<div style="display: flex; gap: 8px; margin-top: 10px">
|
||||
<el-button @click="handleCopyLink" size="small" style="flex: 1">📋 复制链接</el-button>
|
||||
<el-button type="warning" @click="handleRegenerateLink" size="small" style="flex: 1">🔄 重置链接</el-button>
|
||||
</div>
|
||||
|
||||
<!-- 全部文档 -->
|
||||
<div
|
||||
style="padding: 10px 12px; cursor: pointer; border-radius: 6px; margin-bottom: 8px; font-size: 14px; transition: all 0.2s"
|
||||
:style="{ background: !selectedCategoryId ? '#ecf5ff' : '#f5f7fa', color: !selectedCategoryId ? '#409eff' : '#333', fontWeight: !selectedCategoryId ? 'bold' : 'normal' }"
|
||||
@click="clearCategoryFilter"
|
||||
>
|
||||
📋 全部文档
|
||||
</div>
|
||||
|
||||
<!-- 目录树 -->
|
||||
<el-tree
|
||||
:data="categories"
|
||||
node-key="id"
|
||||
default-expand-all
|
||||
:expand-on-click-node="false"
|
||||
:props="{ children: 'children', label: 'name' }"
|
||||
>
|
||||
<template #default="{ node, data }">
|
||||
<div style="display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 6px 0">
|
||||
<span
|
||||
style="cursor: pointer; font-size: 14px; flex: 1"
|
||||
:style="{ color: selectedCategoryId === data.id ? '#409eff' : '#333', fontWeight: selectedCategoryId === data.id ? 'bold' : 'normal' }"
|
||||
@click="selectCategory(data)"
|
||||
>
|
||||
{{ data.is_folder ? '📁' : '📄' }} {{ data.name }}
|
||||
<span v-if="data.doc_count > 0" style="color: #999; font-size: 12px; margin-left: 4px">({{ data.doc_count }})</span>
|
||||
</span>
|
||||
<span style="display: flex; gap: 2px">
|
||||
<el-button size="small" text @click.stop="openAddCategory(data.id)" style="font-size: 12px">+</el-button>
|
||||
<el-button size="small" text @click.stop="openEditCategory(data)" style="font-size: 12px">✎</el-button>
|
||||
<el-button size="small" text type="danger" @click.stop="handleDeleteCategory(data)" style="font-size: 12px">×</el-button>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
</el-tree>
|
||||
</div>
|
||||
|
||||
<!-- 右侧：文档列表 -->
|
||||
<div style="flex: 1; overflow-y: auto">
|
||||
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px">
|
||||
<h1 style="margin: 0; font-size: 24px">{{ kb.name }}</h1>
|
||||
<div style="display: flex; gap: 12px">
|
||||
<el-button @click="handleCopyLink" size="large">📋 复制 AI 链接</el-button>
|
||||
<el-button type="warning" @click="handleRegenerateLink" size="large">🔄 重新生成链接</el-button>
|
||||
<div class="main-layout">
|
||||
<!-- 左侧：目录树（桌面端常驻，手机端抽屉） -->
|
||||
<aside class="sidebar" :class="{ 'mobile-show': showMobileSidebar }">
|
||||
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px">
|
||||
<h3 style="margin: 0; font-size: 16px">📁 目录</h3>
|
||||
<el-button size="small" type="primary" @click="openAddCategory(null)">+ 新建</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- AI 链接显示 -->
|
||||
<el-card style="margin-bottom: 20px" shadow="hover">
|
||||
<div style="display: flex; align-items: center; gap: 12px">
|
||||
<span style="font-weight: bold; font-size: 14px; white-space: nowrap">AI 访问链接：</span>
|
||||
<el-input :model-value="aiUrl" readonly style="flex: 1" size="large">
|
||||
<template #append>
|
||||
<el-button @click="handleCopyLink">复制</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
<div
|
||||
class="cat-item"
|
||||
:class="{ active: !selectedCategoryId }"
|
||||
@click="clearCategoryFilter"
|
||||
>
|
||||
📋 全部文档
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<el-card shadow="hover">
|
||||
<template #header>
|
||||
<div style="display: flex; justify-content: space-between; align-items: center">
|
||||
<span style="font-size: 16px; font-weight: bold">
|
||||
📄 文档列表
|
||||
<el-tag v-if="selectedCategoryPath" closable @close="clearCategoryFilter" style="margin-left: 8px" size="large">
|
||||
{{ selectedCategoryPath }}
|
||||
</el-tag>
|
||||
</span>
|
||||
<div style="display: flex; gap: 10px">
|
||||
<el-button size="large" @click="showTextDialog = true">✏️ 添加文本</el-button>
|
||||
<el-upload :show-file-list="false" :http-request="handleUpload" accept=".docx,.pdf">
|
||||
<el-button type="primary" :loading="uploading" size="large">📤 上传文档</el-button>
|
||||
</el-upload>
|
||||
<el-tree :data="categories" node-key="id" default-expand-all :expand-on-click-node="false">
|
||||
<template #default="{ data }">
|
||||
<div class="tree-node">
|
||||
<span class="tree-label" :class="{ selected: selectedCategoryId === data.id }" @click="selectCategory(data)">
|
||||
{{ data.is_folder ? '📁' : '📄' }} {{ data.name }}
|
||||
<span v-if="data.doc_count > 0" style="color: #999; font-size: 12px">({{ data.doc_count }})</span>
|
||||
</span>
|
||||
<span class="tree-actions">
|
||||
<el-button size="small" text @click.stop="openAddCategory(data.id)">+</el-button>
|
||||
<el-button size="small" text @click.stop="openEditCategory(data)">✎</el-button>
|
||||
<el-button size="small" text type="danger" @click.stop="handleDeleteCategory(data)">×</el-button>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
</el-tree>
|
||||
</aside>
|
||||
|
||||
<!-- 手机端遮罩 -->
|
||||
<div v-if="showMobileSidebar" class="mobile-overlay" @click="showMobileSidebar = false"></div>
|
||||
|
||||
<!-- 右侧：文档列表 -->
|
||||
<main class="content">
|
||||
<!-- 桌面端标题 -->
|
||||
<div class="desktop-header">
|
||||
<h1 style="margin: 0; font-size: 24px">{{ kb.name }}</h1>
|
||||
<div style="display: flex; gap: 12px">
|
||||
<el-button @click="handleCopyLink" size="large">📋 复制 AI 链接</el-button>
|
||||
<el-button type="warning" @click="handleRegenerateLink" size="large">🔄 重新生成链接</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- AI 链接 -->
|
||||
<el-card style="margin-bottom: 16px" shadow="hover">
|
||||
<div style="display: flex; align-items: center; gap: 10px; flex-wrap: wrap">
|
||||
<span style="font-weight: bold; font-size: 14px">AI 链接：</span>
|
||||
<el-input :model-value="aiUrl" readonly style="flex: 1; min-width: 200px" size="large">
|
||||
<template #append>
|
||||
<el-button @click="handleCopyLink">复制</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<!-- 手机端目录按钮 + 操作按钮 -->
|
||||
<div class="mobile-actions">
|
||||
<el-button @click="showMobileSidebar = true" style="flex: 1">📁 目录</el-button>
|
||||
<el-button @click="showTextDialog = true" style="flex: 1">✏️ 添加文本</el-button>
|
||||
<el-upload :show-file-list="false" :http-request="handleUpload" accept=".docx,.pdf" style="flex: 1">
|
||||
<el-button type="primary" :loading="uploading" style="width: 100%">📤 上传</el-button>
|
||||
</el-upload>
|
||||
</div>
|
||||
|
||||
<el-card shadow="hover">
|
||||
<template #header>
|
||||
<div style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px">
|
||||
<span style="font-size: 16px; font-weight: bold">
|
||||
📄 文档列表
|
||||
<el-tag v-if="selectedCategoryPath" closable @close="clearCategoryFilter" style="margin-left: 8px">
|
||||
{{ selectedCategoryPath }}
|
||||
</el-tag>
|
||||
</span>
|
||||
<div class="desktop-actions">
|
||||
<el-button @click="showTextDialog = true">✏️ 添加文本</el-button>
|
||||
<el-upload :show-file-list="false" :http-request="handleUpload" accept=".docx,.pdf">
|
||||
<el-button type="primary" :loading="uploading">📤 上传文档</el-button>
|
||||
</el-upload>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 桌面端：表格 -->
|
||||
<div class="desktop-table">
|
||||
<el-table :data="docs" v-loading="loading" style="width: 100%">
|
||||
<el-table-column prop="original_filename" label="标题" min-width="180" show-overflow-tooltip />
|
||||
<el-table-column label="目录" width="180">
|
||||
<template #default="{ row }">
|
||||
<el-select :model-value="row.category_id" @change="(val: string) => handleChangeDocCategory(row, val)" placeholder="选择目录" size="small" style="width: 100%">
|
||||
<el-option v-for="cat in allCategoriesFlat" :key="cat.id" :label="cat.name" :value="cat.id" />
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="状态" width="90" align="center">
|
||||
<template #default="{ row }">
|
||||
<el-tag :type="statusType(row.status)" size="small">{{ row.status }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="大小" width="80" align="center">
|
||||
<template #default="{ row }">{{ formatSize(row.file_size) }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="180" align="center">
|
||||
<template #default="{ row }">
|
||||
<el-button size="small" @click="handleReprocess(row)">重新解析</el-button>
|
||||
<el-button size="small" type="danger" @click="handleDeleteDoc(row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
|
||||
<!-- 手机端：卡片列表 -->
|
||||
<div class="mobile-cards">
|
||||
<div v-for="doc in docs" :key="doc.id" class="doc-card">
|
||||
<div style="font-weight: bold; font-size: 15px; margin-bottom: 8px">{{ doc.original_filename }}</div>
|
||||
<div style="display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap">
|
||||
<el-tag :type="statusType(doc.status)" size="small">{{ doc.status }}</el-tag>
|
||||
<span style="color: #999; font-size: 12px">{{ formatSize(doc.file_size) }}</span>
|
||||
</div>
|
||||
<el-select :model-value="doc.category_id" @change="(val: string) => handleChangeDocCategory(doc, val)" placeholder="选择目录" size="small" style="width: 100%; margin-bottom: 8px">
|
||||
<el-option v-for="cat in allCategoriesFlat" :key="cat.id" :label="cat.name" :value="cat.id" />
|
||||
</el-select>
|
||||
<div style="display: flex; gap: 8px">
|
||||
<el-button size="small" style="flex: 1" @click="handleReprocess(doc)">重新解析</el-button>
|
||||
<el-button size="small" type="danger" style="flex: 1" @click="handleDeleteDoc(doc)">删除</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<el-table :data="docs" v-loading="loading" style="width: 100%" size="large">
|
||||
<el-table-column prop="original_filename" label="标题/文件名" min-width="200" show-overflow-tooltip>
|
||||
<template #default="{ row }">
|
||||
<span style="font-size: 14px; font-weight: 500">{{ row.original_filename }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="所属目录" width="200">
|
||||
<template #default="{ row }">
|
||||
<el-select
|
||||
:model-value="row.category_id"
|
||||
@change="(val: string) => handleChangeDocCategory(row, val)"
|
||||
placeholder="选择目录"
|
||||
size="default"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option
|
||||
v-for="cat in allCategoriesFlat"
|
||||
:key="cat.id"
|
||||
:label="cat.name"
|
||||
:value="cat.id"
|
||||
/>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="状态" width="100" align="center">
|
||||
<template #default="{ row }">
|
||||
<el-tag :type="statusType(row.status)" size="default">{{ row.status }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="类型" width="80" align="center">
|
||||
<template #default="{ row }">
|
||||
<span style="font-size: 13px">{{ row.file_ext }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="大小" width="100" align="center">
|
||||
<template #default="{ row }">
|
||||
<span style="font-size: 13px">{{ formatSize(row.file_size) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="title" label="解析标题" min-width="150" show-overflow-tooltip>
|
||||
<template #default="{ row }">
|
||||
<span style="font-size: 13px; color: #666">{{ row.title || '-' }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="200" align="center">
|
||||
<template #default="{ row }">
|
||||
<el-button size="default" @click="handleReprocess(row)">🔄 重新解析</el-button>
|
||||
<el-button size="default" type="danger" @click="handleDeleteDoc(row)">🗑️ 删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-card>
|
||||
</el-card>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<!-- 文本内容对话框 -->
|
||||
<el-dialog v-model="showTextDialog" title="✏️ 添加文本内容" width="700px">
|
||||
<!-- 对话框 -->
|
||||
<el-dialog v-model="showTextDialog" title="✏️ 添加文本内容" :width="isMobile ? '95%' : '700px'">
|
||||
<el-form :model="textForm" label-position="top">
|
||||
<el-form-item label="标题" required>
|
||||
<el-input v-model="textForm.title" placeholder="文档标题" size="large" />
|
||||
</el-form-item>
|
||||
<el-form-item label="所属目录">
|
||||
<el-select v-model="textForm.category_id" placeholder="选择目录（可选）" clearable style="width: 100%" size="large">
|
||||
<el-option
|
||||
v-for="cat in allCategoriesFlat"
|
||||
:key="cat.id"
|
||||
:label="cat.name"
|
||||
:value="cat.id"
|
||||
/>
|
||||
<el-select v-model="textForm.category_id" placeholder="选择目录" clearable style="width: 100%" size="large">
|
||||
<el-option v-for="cat in allCategoriesFlat" :key="cat.id" :label="cat.name" :value="cat.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="格式">
|
||||
@@ -409,13 +418,7 @@ function getCategoryName(catId: string) {
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="内容" required>
|
||||
<el-input
|
||||
v-model="textForm.content"
|
||||
type="textarea"
|
||||
:rows="15"
|
||||
placeholder="输入文本内容（支持 Markdown 格式）"
|
||||
size="large"
|
||||
/>
|
||||
<el-input v-model="textForm.content" type="textarea" :rows="12" placeholder="输入文本内容（支持 Markdown）" size="large" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
@@ -424,25 +427,191 @@ function getCategoryName(catId: string) {
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 目录管理对话框 -->
|
||||
<el-dialog v-model="showCatDialog" :title="editingCatId ? '✏️ 编辑目录' : '📁 新建目录'" width="450px">
|
||||
<el-dialog v-model="showCatDialog" :title="editingCatId ? '✏️ 编辑目录' : '📁 新建目录'" :width="isMobile ? '95%' : '450px'">
|
||||
<el-form :model="catForm" label-position="top">
|
||||
<el-form-item label="目录名称" required>
|
||||
<el-input v-model="catForm.name" placeholder="如：公司基本信息" size="large" />
|
||||
</el-form-item>
|
||||
<el-form-item label="类型">
|
||||
<el-radio-group v-model="catForm.is_folder" size="large">
|
||||
<el-radio :value="true">📁 文件夹（可包含子目录）</el-radio>
|
||||
<el-radio :value="false">📄 叶子分类（存放文档）</el-radio>
|
||||
<el-radio :value="true">📁 文件夹</el-radio>
|
||||
<el-radio :value="false">📄 叶子分类</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="showCatDialog = false" size="large">取消</el-button>
|
||||
<el-button type="primary" :loading="catLoading" @click="handleSaveCategory" size="large">
|
||||
{{ editingCatId ? '保存' : '创建' }}
|
||||
</el-button>
|
||||
<el-button type="primary" :loading="catLoading" @click="handleSaveCategory" size="large">{{ editingCatId ? '保存' : '创建' }}</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.main-layout {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
width: 280px;
|
||||
flex-shrink: 0;
|
||||
overflow-y: auto;
|
||||
max-height: calc(100vh - 180px);
|
||||
position: sticky;
|
||||
top: 20px;
|
||||
}
|
||||
|
||||
.content {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.cat-item {
|
||||
padding: 10px 12px;
|
||||
cursor: pointer;
|
||||
border-radius: 6px;
|
||||
margin-bottom: 6px;
|
||||
font-size: 14px;
|
||||
background: #f5f7fa;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.cat-item:hover {
|
||||
background: #e8e8e8;
|
||||
}
|
||||
|
||||
.cat-item.active {
|
||||
background: #ecf5ff;
|
||||
color: #409eff;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.tree-node {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
.tree-label {
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.tree-label.selected {
|
||||
color: #409eff;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.tree-actions {
|
||||
display: flex;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.mobile-header {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mobile-actions {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mobile-cards {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.desktop-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.desktop-actions {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.mobile-overlay {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* 手机端适配 */
|
||||
@media (max-width: 768px) {
|
||||
.main-layout {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 80%;
|
||||
max-width: 300px;
|
||||
height: 100vh;
|
||||
background: #fff;
|
||||
z-index: 1000;
|
||||
padding: 20px;
|
||||
box-shadow: 2px 0 10px rgba(0, 0, 0, 0.2);
|
||||
overflow-y: auto;
|
||||
max-height: 100vh;
|
||||
}
|
||||
|
||||
.sidebar.mobile-show {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.mobile-overlay {
|
||||
display: block;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.content {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.mobile-header {
|
||||
display: block;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.desktop-header {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mobile-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.desktop-actions {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.desktop-table {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mobile-cards {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.doc-card {
|
||||
border: 1px solid #eee;
|
||||
border-radius: 8px;
|
||||
padding: 12px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
+867
-624
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user