|
|
@@ -4,8 +4,21 @@
|
|
|
<div class="app-header">
|
|
|
<div class="header-content">
|
|
|
<div class="header-main">
|
|
|
- <h1 class="app-title">知识库内容管理</h1>
|
|
|
- <p class="app-subtitle">管理知识库中的文档和内容</p>
|
|
|
+ <!-- 返回按钮 -->
|
|
|
+ <div class="header-back">
|
|
|
+ <el-button
|
|
|
+ class="back-btn"
|
|
|
+ @click="goBack"
|
|
|
+ text
|
|
|
+ >
|
|
|
+ <span class="back-icon">←</span>
|
|
|
+ <span style="color: white">返回知识库</span>
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ <div class="header-titles">
|
|
|
+ <h1 class="app-title">知识库内容管理</h1>
|
|
|
+ <p class="app-subtitle">管理知识库中的文档和内容</p>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<div class="header-stats">
|
|
|
<div class="stat-item">
|
|
|
@@ -52,9 +65,6 @@
|
|
|
</div>
|
|
|
<div class="document-info">
|
|
|
<span class="document-name">{{ item.title || item.text }}</span>
|
|
|
-<!-- <span class="document-status" :class="item.statusDesc === '可用' ? 'available' : 'unavailable'">-->
|
|
|
-<!-- {{ item.statusDesc || '未知状态' }}-->
|
|
|
-<!-- </span>-->
|
|
|
</div>
|
|
|
<div class="document-actions">
|
|
|
<el-tooltip content="删除文档" placement="top">
|
|
|
@@ -94,7 +104,8 @@
|
|
|
<div class="content-header">
|
|
|
<div class="content-title">
|
|
|
<h2>{{ selectedTitle || '选择文档查看内容' }}</h2>
|
|
|
- <span v-if="statusDesc" class="content-status" :class="statusDesc === '可用' ? 'available' : 'unavailable'">
|
|
|
+ <span v-if="statusDesc" class="content-status"
|
|
|
+ :class="statusDesc === '可用' ? 'available' : 'unavailable'">
|
|
|
{{ statusDesc }}
|
|
|
</span>
|
|
|
</div>
|
|
|
@@ -200,7 +211,7 @@
|
|
|
<el-table
|
|
|
v-if="chunkDialogVisible && chunkList.length > 0"
|
|
|
:data="chunkList"
|
|
|
- style="width: 100%"
|
|
|
+ style="width:100%"
|
|
|
class="chunk-table"
|
|
|
:scrollbar-always-on="true"
|
|
|
>
|
|
|
@@ -336,6 +347,11 @@ export default defineComponent({
|
|
|
const chunkPageSize = ref(10);
|
|
|
const chunkTotal = ref(0);
|
|
|
|
|
|
+ // 返回按钮功能
|
|
|
+ const goBack = () => {
|
|
|
+ router.push('/');
|
|
|
+ };
|
|
|
+
|
|
|
// 获取API数据并填充项
|
|
|
const fetchData = async (datasetId: number) => {
|
|
|
console.log(datasetId);
|
|
|
@@ -509,6 +525,13 @@ export default defineComponent({
|
|
|
}
|
|
|
};
|
|
|
|
|
|
+ // 分页大小变化处理
|
|
|
+ const handleSizeChange = (newSize: number) => {
|
|
|
+ chunkPageSize.value = newSize;
|
|
|
+ chunkPage.value = 1;
|
|
|
+ fetchChunks(1);
|
|
|
+ };
|
|
|
+
|
|
|
return {
|
|
|
activeItem,
|
|
|
selectedTitle,
|
|
|
@@ -535,7 +558,9 @@ export default defineComponent({
|
|
|
openChunkDialog,
|
|
|
fetchChunks,
|
|
|
statusDesc,
|
|
|
- formRef
|
|
|
+ formRef,
|
|
|
+ goBack,
|
|
|
+ handleSizeChange
|
|
|
};
|
|
|
},
|
|
|
});
|
|
|
@@ -545,7 +570,7 @@ export default defineComponent({
|
|
|
/* 基础样式 */
|
|
|
.app-container {
|
|
|
min-height: 100vh;
|
|
|
- background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
|
+ background: linear-gradient(135deg, rgba(102, 126, 234, 0.81) 0%, rgba(118, 75, 162, 0.77) 100%);
|
|
|
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
|
}
|
|
|
|
|
|
@@ -568,6 +593,38 @@ export default defineComponent({
|
|
|
|
|
|
.header-main {
|
|
|
flex: 1;
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-start;
|
|
|
+ gap: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.header-back {
|
|
|
+ flex-shrink: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.back-btn {
|
|
|
+ color: white;
|
|
|
+ font-weight: 500;
|
|
|
+ padding: 8px 16px;
|
|
|
+ border-radius: 12px;
|
|
|
+ transition: all 0.3s ease;
|
|
|
+ background: rgba(255, 255, 255, 0.1);
|
|
|
+ border: 1px solid rgba(255, 255, 255, 0.2);
|
|
|
+}
|
|
|
+
|
|
|
+.back-btn:hover {
|
|
|
+ background: rgb(255, 255, 255);
|
|
|
+ transform: translateX(-2px);
|
|
|
+}
|
|
|
+
|
|
|
+.back-icon {
|
|
|
+ color: white;
|
|
|
+ margin-right: 6px;
|
|
|
+ font-weight: bold;
|
|
|
+}
|
|
|
+
|
|
|
+.header-titles {
|
|
|
+ flex: 1;
|
|
|
}
|
|
|
|
|
|
.app-title {
|
|
|
@@ -1104,6 +1161,20 @@ export default defineComponent({
|
|
|
text-align: center;
|
|
|
}
|
|
|
|
|
|
+ .header-main {
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 12px;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .header-back {
|
|
|
+ align-self: flex-start;
|
|
|
+ }
|
|
|
+
|
|
|
+ .header-titles {
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
.header-stats {
|
|
|
gap: 32px;
|
|
|
}
|
|
|
@@ -1198,4 +1269,214 @@ export default defineComponent({
|
|
|
color: #718096;
|
|
|
border-color: #e2e8f0;
|
|
|
}
|
|
|
+
|
|
|
+/* 分段弹窗样式 */
|
|
|
+.chunk-dialog :deep(.el-dialog) {
|
|
|
+ border-radius: 24px;
|
|
|
+ overflow: hidden;
|
|
|
+ box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2);
|
|
|
+ max-height: 85vh;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+}
|
|
|
+
|
|
|
+.chunk-dialog :deep(.el-dialog__header) {
|
|
|
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
|
+ margin: 0;
|
|
|
+ padding: 24px 32px;
|
|
|
+}
|
|
|
+
|
|
|
+.chunk-dialog :deep(.el-dialog__title) {
|
|
|
+ color: white;
|
|
|
+ font-size: 1.5rem;
|
|
|
+ font-weight: 700;
|
|
|
+}
|
|
|
+
|
|
|
+.chunk-dialog :deep(.el-dialog__headerbtn) {
|
|
|
+ top: 24px;
|
|
|
+ right: 24px;
|
|
|
+}
|
|
|
+
|
|
|
+.chunk-dialog :deep(.el-dialog__headerbtn .el-dialog__close) {
|
|
|
+ color: white;
|
|
|
+ font-size: 1.25rem;
|
|
|
+}
|
|
|
+
|
|
|
+.chunk-dialog :deep(.el-dialog__body) {
|
|
|
+ padding: 0;
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+
|
|
|
+.chunk-container {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ height: 100%;
|
|
|
+ min-height: 400px;
|
|
|
+}
|
|
|
+
|
|
|
+.chunk-header {
|
|
|
+ padding: 20px 24px;
|
|
|
+ background: #f8fafc;
|
|
|
+ border-bottom: 1px solid #e2e8f0;
|
|
|
+}
|
|
|
+
|
|
|
+.chunk-stats {
|
|
|
+ display: flex;
|
|
|
+ gap: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.stat-item {
|
|
|
+ color: #64748b;
|
|
|
+ font-size: 0.9rem;
|
|
|
+ font-weight: 500;
|
|
|
+}
|
|
|
+
|
|
|
+.chunk-content {
|
|
|
+ flex: 1;
|
|
|
+ overflow: auto;
|
|
|
+ padding: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.chunk-table {
|
|
|
+ height: 100%;
|
|
|
+ border: none;
|
|
|
+}
|
|
|
+
|
|
|
+.chunk-table :deep(.el-table__header-wrapper) {
|
|
|
+ background: #f7fafc;
|
|
|
+}
|
|
|
+
|
|
|
+.chunk-table :deep(.el-table__header th) {
|
|
|
+ background: #f7fafc;
|
|
|
+ color: #374151;
|
|
|
+ font-weight: 600;
|
|
|
+ border-bottom: 1px solid #e2e8f0;
|
|
|
+}
|
|
|
+
|
|
|
+.chunk-table :deep(.el-table__body tr:hover > td) {
|
|
|
+ background-color: #f0f9ff;
|
|
|
+}
|
|
|
+
|
|
|
+.chunk-table :deep(.el-table__body td) {
|
|
|
+ border-bottom: 1px solid #f1f5f9;
|
|
|
+ padding: 12px 16px;
|
|
|
+}
|
|
|
+
|
|
|
+.chunk-id {
|
|
|
+ background: #e2e8f0;
|
|
|
+ color: #475569;
|
|
|
+ padding: 4px 8px;
|
|
|
+ border-radius: 6px;
|
|
|
+ font-size: 0.8rem;
|
|
|
+ font-weight: 600;
|
|
|
+}
|
|
|
+
|
|
|
+.summary-content {
|
|
|
+ max-height: 60px;
|
|
|
+ overflow: hidden;
|
|
|
+ line-height: 1.4;
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-line-clamp: 3;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ color: #475569;
|
|
|
+ font-size: 0.9rem;
|
|
|
+}
|
|
|
+
|
|
|
+.full-content {
|
|
|
+ max-height: 120px;
|
|
|
+ overflow-y: auto;
|
|
|
+ line-height: 1.5;
|
|
|
+ color: #475569;
|
|
|
+ font-size: 0.9rem;
|
|
|
+ padding-right: 8px;
|
|
|
+}
|
|
|
+
|
|
|
+/* 自定义滚动条 */
|
|
|
+.full-content::-webkit-scrollbar {
|
|
|
+ width: 4px;
|
|
|
+}
|
|
|
+
|
|
|
+.full-content::-webkit-scrollbar-track {
|
|
|
+ background: #f1f5f9;
|
|
|
+ border-radius: 2px;
|
|
|
+}
|
|
|
+
|
|
|
+.full-content::-webkit-scrollbar-thumb {
|
|
|
+ background: #cbd5e1;
|
|
|
+ border-radius: 2px;
|
|
|
+}
|
|
|
+
|
|
|
+.full-content::-webkit-scrollbar-thumb:hover {
|
|
|
+ background: #94a3b8;
|
|
|
+}
|
|
|
+
|
|
|
+.status-tag {
|
|
|
+ border: none;
|
|
|
+ font-weight: 600;
|
|
|
+ padding: 4px 12px;
|
|
|
+ border-radius: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.empty-chunks {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ height: 300px;
|
|
|
+ color: #64748b;
|
|
|
+}
|
|
|
+
|
|
|
+.empty-icon {
|
|
|
+ font-size: 4rem;
|
|
|
+ margin-bottom: 16px;
|
|
|
+ opacity: 0.5;
|
|
|
+}
|
|
|
+
|
|
|
+.empty-chunks h3 {
|
|
|
+ margin: 0 0 8px 0;
|
|
|
+ color: #475569;
|
|
|
+ font-size: 1.25rem;
|
|
|
+ font-weight: 600;
|
|
|
+}
|
|
|
+
|
|
|
+.empty-chunks p {
|
|
|
+ margin: 0;
|
|
|
+ font-size: 0.9rem;
|
|
|
+}
|
|
|
+
|
|
|
+.pagination-section {
|
|
|
+ padding: 20px 24px;
|
|
|
+ background: #f8fafc;
|
|
|
+ border-top: 1px solid #e2e8f0;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+}
|
|
|
+
|
|
|
+.pagination-section :deep(.el-pagination) {
|
|
|
+ justify-content: center;
|
|
|
+}
|
|
|
+
|
|
|
+.pagination-section :deep(.el-pagination .btn-prev),
|
|
|
+.pagination-section :deep(.el-pagination .btn-next) {
|
|
|
+ border-radius: 8px;
|
|
|
+ border: 1px solid #d1d5db;
|
|
|
+}
|
|
|
+
|
|
|
+.pagination-section :deep(.el-pagination .number) {
|
|
|
+ border-radius: 8px;
|
|
|
+ border: 1px solid #d1d5db;
|
|
|
+}
|
|
|
+
|
|
|
+.pagination-section :deep(.el-pagination .number.active) {
|
|
|
+ background: #3b82f6;
|
|
|
+ border-color: #3b82f6;
|
|
|
+ color: white;
|
|
|
+}
|
|
|
+
|
|
|
+.pagination-section :deep(.el-pagination .el-select .el-input) {
|
|
|
+ border-radius: 8px;
|
|
|
+}
|
|
|
</style>
|
xueyiming